Closed hnordt closed 5 years ago
const state = useContext(ReduxStateContext)
Every single action that is dispatched via redux and change any place of the state would trigger a rerender on all components that are using useMappedState
simply because it's using the line above.
Context updates triggers a rerender just like useState updates and you can't bail out of context updates yet, see item 2: https://github.com/facebook/react/issues/14110
But then the consumer will bail out via setDerivedState. This same problem happens to the multi store approach, because every hook subscribes to the store.
Hum, I think I got it. The useContext will make the component using this hook to rerender, the setDerivedState bails out itself only.
See also the react-redux roadmap on why they are going back to using their own subscription rather than context: https://github.com/reduxjs/react-redux/issues/1177
Just for curiosity, why you've opted for a multi-store subscription model instead of subscribing to the store in a top-level Provider?
Something like:
Only the
ReduxStateProvider
subscribes to store updates, then it passes the update down to all consumers. Consumers have a chance to bail out by comparingprevDerivedState
withnextDerivedState
.