- All Courses
- React Performance Engineering
- Taming Re-renders
- Context without the re-render tax
Context without the re-render tax
When a context value changes, every component consuming it re-renders — there is no partial subscription.
Overview
One context, one blast radius
When a context value changes, every component consuming it re-renders — there is no partial subscription. A context holding both a theme and a live cursor position re-renders your theme consumers sixty times a second.
The fix is to split by how often each piece changes. Slow-moving configuration belongs in one context, rapidly changing state in another, and components subscribe only to what they need.
Building the provider value inline creates a fresh object on every provider render, which invalidates every consumer regardless of whether the contents changed. Memoise it.
In this lesson you will:
- Understand why every consumer re-renders together
- Split a context by update frequency
- Keep the provider value stable
Resources
Notes are not saved yet — they clear when you leave this page.
memo, useMemo, and useCallback
26m
State colocation and lifting
10m