Контекст для низкочастотного состояния

Изменение значения контекста перерисовывает каждого потребителя — частичной подписки нет. Когда value у Provider — новая ссылка, React помечает каждый компонент, вызвавший useContext для этого контекста, как требующий перерисовки. Не имеет значения, что потребитель читает только value.theme, а изменилось value.locale; единица изменения — это всё значение целиком, а единица уведомления — «все потребители». React.memo тебя не спасёт: мемоизированный компонент всё равно перерисовывается, когда обновляется потребляемый им контекст, потому что контекст — отдельный канал от пропсов.

const AppContext = createContext<{ theme: Theme; locale: string } | null>(null);

// reads only `theme`, but re-renders whenever `locale` changes too —
// because the value reference changed, and memo can't block a context update
const ThemeBadge = memo(function ThemeBadge() {
  const { theme } = useContext(AppContext)!;
  return <span data-theme={theme} />;
});

Это единственный факт, на котором держится весь паттерн: контекст — это вещание, всё-или-ничего, каждому потребителю.

Поскольку изменение вещается, контекст подходит состоянию, которое меняется редко и читается широко. Тема, аутентифицированный пользователь, локаль, feature-флаги — они переключаются с интервалом в секунды или минуты (или раз за сессию) и нужны в десятках разбросанных мест. Вещание на каждое изменение дёшево, когда изменения редки, а пробрасывать их пропсами было бы мучительно. Это ровно та форма, под которую контекст и был спроектирован: низкочастотное, широко читаемое. Стоимость перерисовки реальна, но платится почти никогда; стоимость проброса пропсов избегается постоянно.

// good fit: changes on a user click, read all over the app
const ThemeContext = createContext<ThemeApi | null>(null);

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
  return ctx;
}

Если твоё кандидатное состояние меняется много раз в секунду — это противоположная форма, и контекст здесь неправильный инструмент, как бы широко его ни читали.

Правильно: держи значение провайдера стабильным, чтобы потребители перерисовывались только на реальных изменениях. Стоимость контекста платится всякий раз, когда меняется ссылка value, — поэтому нестабильное значение (свежий объектный литерал на каждый рендер) перерисовывает всех потребителей на каждом рендере родителя, даже когда ничего значимого не изменилось. Мемоизируй значение и держи сеттеры стабильными, чтобы они никогда не форсировали изменение значения. Чистый ThemeContext переключает значение только тогда, когда тема действительно переключается.

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");

  // toggle is stable; useState's setter identity is already stable
  const toggle = useCallback(() => setTheme((t) => (t === "light" ? "dark" : "light")), []);

  // value reference changes ONLY when `theme` changes → consumers re-render only then
  const value = useMemo(() => ({ theme, toggle }), [theme, toggle]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

Без useMemo { theme, toggle } — новый объект на каждом рендере ThemeProvider, так что любое несвязанное изменение состояния около корня вещало бы каждому потребителю впустую.

Режим отказа: положи высокочастотное состояние в контекст — и каждый потребитель становится штормом перерисовок. Значения полей, меняющиеся на каждое нажатие клавиши, позиция мыши, меняющаяся на каждый mousemove, кадр анимации, меняющийся 60 раз в секунду, — проведи любое из них через контекст, и каждый потребитель перерисовывается с этой частотой, включая те, что даже не читают меняющееся поле. Это классический анти-паттерн контекста: «контекст формы», хранящий живые значения ввода, где набор одного символа перерисовывает каждое поле, кнопку отправки и сводку валидации.

// ANTI-PATTERN: live values in context → typing re-renders the whole form tree
const FormContext = createContext<{ values: Record<string, string>; set: Fn } | null>(null);

function Field({ name }: { name: string }) {
  const { values, set } = useContext(FormContext)!; // re-renders on EVERY keystroke,
  return <input value={values[name]} onChange={(e) => set(name, e.target.value)} />; // in any field
}

Решение — не мемоизировать сильнее, а перестать вещать быстрое состояние. Держи высокочастотное состояние локальным (каждое поле владеет своим useState), поднимай только то, что действительно общее, или используй стор с подписками по селекторам (useSyncExternalStore, Zustand, Jotai), чтобы компонент перерисовывался только когда меняется его срез. Контекст вещает; быстрому состоянию нужна адресная подписка.