be wary of mutable refs, useImperativeHandler. check stales during planning #54

Opinion - is stale check

A simple check to avoid wasting time in React - after planning of the code (pseudocode).
Ask 'is this stale' for each variable - variables, functions etc. Consider variations/states of the flow.

This would avoid re-render issues, etc.

Context: was trying to expose ref for a component, inspired by the Popup component (that exposes .open, .close, .toggle, .isOpen). There's even a React hook for exposing such things called, useImperativeHandle. The issue is - the feature (parent) component didn't have any state, so the hook would update the ref, but the parent would never know (coz it never re-rendered). 😅

// parent.jsx
const gfRef = useRef();

return <View>
    <CrazyChildComponent ref={gfRef} />{/* this had a flow of its own, at the end it would change the positiveCallback with the result, */}
    <Button onPress={gfRef.onNegative} disabled={gdRef.isNegativeDisabled} title={gfRef.current.negativeLabel} /> 
    <Button onPress={gfRef.onPositive} disabled={gfRef.isPositiveDisabled} title={gfRef.current.positiveLabel}/>
  </View>;

Remember: Check 'Is this stale?' for all entities

btw. any way I could have identified the blocker early.

PS: fix was to use state instead of ref, works fine now. Of course, this means the parent has to initialize a state, but that''s the same amount of code as creating a ref, son fine!