React quirks: Context updates trigger re-render of all consumers

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.

Other notes

• 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.