Разделение контекстов

Значение контекста — это его радиус поражения перерисовки: каждый потребитель перерисовывается, когда идентичность значения меняется. React не сравнивает внутренности твоего значения контекста. Когда переданное провайдеру значение — новая ссылка, каждый компонент, вызывающий useContext на нём, перерисовывается — независимо от того, какое поле он реально читает. Так что гранулярность твоего контекста и есть гранулярность твоих перерисовок.

// One context, everything in it. Any change → new value object →
// EVERY useContext(AppContext) consumer re-renders, even ones that
// only read `theme` when it was `user` that changed.
const AppContext = createContext<AppState | null>(null);

function AppProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");
  // a fresh object literal every render → identity changes every render
  return (
    <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
      {children}
    </AppContext.Provider>
  );
}

Корзина читает user. Шапка читает theme. Оба подписаны на один и тот же контекст, поэтому оба перерисовываются на любое из изменений. Радиус поражения — «все».

Дели по ответственности: один контекст на каждый независимо меняющийся срез. Состояние авторизации и состояние темы меняются с совершенно разной частотой и читаются разными частями дерева. Дай каждому свой контекст, и потребитель подпишется только на тот срез, который реально читает — и перерисуется только ради него.

const AuthContext = createContext<{ user: User | null; setUser: (u: User | null) => void } | null>(null);
const ThemeContext = createContext<{ theme: Theme; setTheme: (t: Theme) => void } | null>(null);

function AppProviders({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState<Theme>("light");
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <ThemeContext.Provider value={{ theme, setTheme }}>
        {children}
      </ThemeContext.Provider>
    </AuthContext.Provider>
  );
}

Теперь useContext(ThemeContext) в шапке перерисовывается только на изменения темы; корзина, читающая useContext(AuthContext), не затронута, когда пользователь переключает тёмную тему. Радиус поражения сжался с «все» до «все, кто читает этот срез». Ось, по которой делить, — что меняется вместе, а что независимо, а не как данные нарисованы на доске.

Отделяй состояние от его сеттеров: писателям не нужно значение. Компоненту, который только меняет тему — кнопке-переключателю, — незачем перерисовываться, когда тема меняется. Но если theme и setTheme живут в одном контексте, он перерисовывается всё равно. Раздели читаемое состояние в один контекст, а dispatch/сеттеры — в другой. Сеттеры стабильны на всю жизнь компонента, поэтому значение dispatch-контекста никогда не меняет идентичность — его потребители перерисовываются практически никогда.

const ThemeStateContext = createContext<Theme | null>(null);
const ThemeDispatchContext = createContext<((t: Theme) => void) | null>(null);

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
  // setTheme from useState is stable across renders, so the dispatch
  // context value is referentially stable → its consumers don't re-render.
  return (
    <ThemeStateContext.Provider value={theme}>
      <ThemeDispatchContext.Provider value={setTheme}>
        {children}
      </ThemeDispatchContext.Provider>
    </ThemeStateContext.Provider>
  );
}

// A toggle button reads ONLY dispatch → never re-renders when theme changes.
function ThemeToggle() {
  const setTheme = useContext(ThemeDispatchContext)!;
  return <button onClick={() => setTheme((prev) => (prev === "dark" ? "light" : "dark"))}>Toggle</button>;
}

Это тот же приём, что формализует useReducer + контекст: контекст state и контекст dispatch. dispatch стабилен навсегда, поэтому потребители «только на запись» не стоят ничего.

Стабилизируй передаваемое значение через useMemo, иначе разделение не даёт ничего. Провайдер, чьё значение — свежий объектный литерал, получает новую идентичность на каждом рендере провайдера, поэтому каждый потребитель перерисовывается каждый раз, когда провайдер перерисовывается — даже если ни одно поле реально не изменилось. Разделение контекстов не помогает, если каждый осколок всё равно спускает вниз нестабильный объект. Мемоизируй значение по его реальным зависимостям.

function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  // Without useMemo this object is new every render → identity churn.
  // With it, consumers re-render only when `user` actually changes
  // (setUser is already stable, so it's not in the dep list's intent).
  const value = useMemo(() => ({ user, setUser }), [user]);
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

Разделение state/dispatch — это более чистая версия того же: голое значение theme и голый стабильный setTheme не нуждаются в useMemo вовсе, потому что ни одно из них не объектный литерал. Тянись к useMemo, когда значение обязано быть собранным объектом (например, { user, setUser }); тянись к разделению, когда можешь избежать объекта целиком.