Lesson 2.3

Context without the re-render tax

When a context value changes, every component consuming it re-renders — there is no partial subscription.

6mAdvanced7.1k students

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

Previous Lesson
Next Lesson
Context without the re-render tax — React Performance Engineering — Vertex