When working with React components that have async data flowing into them either via single requests e.g.
or via a WebSocket connection/subscription state created with
useReducer that is initially based on component
can become stale/incorrect as the data flows into the component and updates the
JSON.parseing data that flows in from a connection will create new objects even if the strings being parsed as the same each render. This can defeat
useMemo and cause infinite rendering loops even if your
useReducer reducer returns the same object on each call.
null from a component triggers
useEffect clean up code.
If in your action handlers you need to do more than just
dispatch, like call a parent callback to provide a controlled value update then you can still use contexts to provide
dispatch but you will just need to also passdown the parent callback/reducer required state that is provided by your parent. Overall it will result in fewer functions on your state and fewer props being passed down.
Instead of executing parent callbacks in the reducer try and return effect objects that describe what the component code should do next.
When you have a reducer dispatch that depends on state (A) that is created by a hook that depends on state created by the reducer create a new hook to deal with that dispatch processing (A) that is called after the hook creates the state (A).