When working with React components that have async data flowing into them either via single requests e.g. fetch
calls
or via a WebSocket connection/subscription state created with useReducer
that is initially based on component props
can become stale/incorrect as the data flows into the component and updates the props
.
Also JSON.parse
ing 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.
Returning 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