I tried to find the differences between React Context API and Redux. The blogs say the difference between them as follows. Context API prompts a re-render on each update of the state and re-renders all components regardless. Redux, however, only re-renders the updated components. I've built the test project and I've found that Context API re-renders only components that are rendered from within the Consumer. But I don't understand about it. I think that the principles of them are the same and I can't find the differences in the code. I'd like to know why Context API re-renders the components theoretically.
1 Answers
It's because of how the state is encapsulated. In react-redux, state is encapsulated inside a store. When you pass the store to Provider in react-reedux - you are using the Context API (see this in react-redux) but here's the kicker - the redux context never changes (in 99% of implementations anyway). So the Consumers of the Redux context will never re-render the way a regular context consumer would (because the value supplied by the context never changes).
So how the heck does redux cause react components to re-render then?
A component subscribe's to the store that is delivered via the Redux context and it (let's just talk about the useSelector hook - connect HOC works the same, though) set's it's own state variable. When the redux store's state updates (actions, dispatch, you know), the store calls any subscribers with the new state. If the value subscribed (or selected from the state) is the same as the previous value, then redux doesn't update the state variable in the hook or HOC - check out this file and look for forceRender.
This is different from the Context API because the source of data of the Context API (in most typical use cases) are state variables in the Provider (or props from above). Whenever the values given to context change, consumers re-render. This is fundamentally different than the way react-redux works because, as stated above, the value given to the react-redux context never changes (it's the store, remember?)
tldr in react-redux the context provided by the redux provider is a store and never changes. In typical non-redux context API use cases, the value supplied by context itself changes.
This can be very confusing, ask lots of questions to help me improve my answer!
EDIT: You made a comment about useDispatch not resulting in re-renders. This is because from the docs:
The dispatch function reference will be stable as long as the same store > instance is being passed to the <Provider>.
i.e. useDispatch never changes (as long as the store doesn't change, 99% of the time it won't because people are encouraged to design apps with a single non-changing store)
Related