Please refer to this line: <xyzContext.Provider value = {[number, setNumber]}
It creates a new context value everytime the xyzProvider re-renders.
That's because of the new inline array constructed on each render.
In your case the <App/> never re-renders (no state/props change) but in other cases if <App/> gets re-rendered, it will cause the provider to re-render, hence all its consumers will re-render , even if the context did not actually change.
Hi, nice post :)
Please refer to this line:
<xyzContext.Provider value = {[number, setNumber]}It creates a new context value everytime the xyzProvider re-renders.
That's because of the new inline array constructed on each render.
In your case the
<App/>never re-renders (no state/props change) but in other cases if<App/>gets re-rendered, it will cause the provider to re-render, hence all its consumers will re-render , even if the context did not actually change.See Ryan Florence's post: medium.com/@ryanflorence/react-con...