How context propagates
When a context value changes, every component that consumes that context re renders, no matter how deep. If one big context holds many unrelated values, a change to any one of them re renders all consumers.
- Consumers subscribe to the whole context value, not a slice
- A new value reference each render makes everyone re render
- Mixing frequently and rarely changing data is the trap
Splitting strategies
- Split by update frequency, putting volatile state in its own context
- Split by domain, so a theme change does not touch the cart
- Keep the provider value stable with useMemo so it changes only when needed
- Separate state and dispatch into two contexts so action only consumers stay stable
When to reach for other tools
If you find yourself fighting context re renders constantly, a selector based store may fit better, since it lets components subscribe to a slice.
Split contexts
Key idea
A context change re renders every consumer, so split context by update frequency and domain and memoize the provider value, keeping volatile data away from stable consumers.