React quirks: Context updates trigger re-render of all consumers
2 October 2022 (Updated 2 October 2022)
On this page
In a nutshell
When you update a slice of React context, React will trigger a re-render of all consumers of that context (i.e., any component that invokes
useContext(someContext)) regardless of whether they use the updated slice. This can cause a lot of unnecessary re-renders and potentially performance issues.
This behaviour of context is different from other state management libraries like Redux or Zustand (source), so it can easily trip you up.
View this Codesandbox to see this in action.
- I think this re-rendering of all consumers only happens if you use a non-primitive value as your context. When React compares the context values using
Object.is, the comparison will always fail for non-primitives like objects, hence the re-renders. In reality, you typically use objects as context values so the re-render problem still applies. Need to check this.