How context triggers rerenders
Every component that reads a context rerenders when the provider value changes by identity. If you pass a fresh object as the value on each render, all consumers rerender even when their data did not really change. Stabilizing the value is the first fix.
- Consumers rerender when the provider value identity changes.
- A new object literal each render forces all consumers to update.
- Memoizing the value keeps identity stable between renders.
Splitting and memoizing
When some context data changes often and some rarely, putting them in one provider couples them, so rare consumers rerender on every frequent change. Splitting into separate contexts isolates the churn. Memoizing the value object and any handlers keeps stable references.
- Memoize the value object passed to the provider.
- Split fast changing and slow changing data into separate contexts.
- Keep handlers stable so consumers do not rerender needlessly.
These steps matter most when many components subscribe to a busy context.
Key idea
Context consumers rerender on value identity changes, so memoize the value and split frequently changing data into separate contexts.