Контекст: данные без пробрасывания

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

В доске из части II правда лежала в одном объекте на уровне модуля, и любая функция читала её напрямую. React так не умеет: у каждого компонента своя память, и в прошлых статьях главы значение, нужное двоим, поднималось к общему родителю. Дальше оно должно как-то вернуться вниз — и единственный путь вниз — пропсы.

Пока этажей два, всё честно. Ниже тема нужна только кнопке, но объявлена в App, а между ними стоит Panel. Пример сам нажмёт «сменить тему» — предскажите, сколько строк «рендер Panel» окажется в выводе, и заодно посмотрите на тип PanelProps.

tsx

interface Theme {
  background: string;
  color: string;
}

interface ButtonProps {
  theme: Theme;
  label: string;
}

interface PanelProps {
  theme: Theme;
  title: string;
}

function Button({ theme, label }: ButtonProps) {
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      {label}
    </button>
  );
}

function Panel({ theme, title }: PanelProps) {
  // Panel темой не пользуется: она нужна кнопке этажом ниже
  console.log("рендер Panel");
  return (
    <section>
      <h3>{title}</h3>
      <Button theme={theme} label="Сохранить" />
    </section>
  );
}

function App() {
  const [dark, setDark] = React.useState(false);
  const theme: Theme = dark
    ? { background: "#2a2735", color: "#ffffff" }
    : { background: "#eeeeee", color: "#2a2735" };
  return (
    <div>
      <Panel theme={theme} title="Настройки" />
      <button id="toggle" onClick={() => setDark((d) => !d)}>
        сменить тему
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

interface Theme {
  background: string;
  color: string;
}

interface ButtonProps {
  theme: Theme;
  label: string;
}

interface PanelProps {
  theme: Theme;
  title: string;
}

function Button({ theme, label }: ButtonProps) {
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      {label}
    </button>
  );
}

function Panel({ theme, title }: PanelProps) {
  // Panel темой не пользуется: она нужна кнопке этажом ниже
  console.log("рендер Panel");
  return (
    <section>
      <h3>{title}</h3>
      <Button theme={theme} label="Сохранить" />
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

страница примера

Сначала предположите, что выведет код

Две: одна на первую отрисовку, вторая после нажатия — Panel перерисовывается вместе с родителем. Но интереснее не вывод, а типы. В PanelProps лежит theme, которую Panel ни разу не упоминает в разметке: он курьер. Компонент, который ничего не знал о теме, теперь от неё зависит — и любое изменение Theme обязано пройти через его файл.

Такую передачу называют пробрасыванием пропсов (prop drilling). Она не ошибка сама по себе — но она заразна. Стоит вставить между панелью и кнопкой ещё один этаж, и его тоже придётся научить теме. А если забыть — компилятор скажет об этом прямым текстом:

tsx

interface Theme {
  background: string;
  color: string;
}

interface ButtonProps {
  theme: Theme;
  label: string;
}

interface ToolbarProps {
  theme: Theme;
}

function Button({ theme, label }: ButtonProps) {
  return <button style={{ background: theme.background }}>{label}</button>;
}

// между панелью и кнопкой появился ещё один этаж — и тему донесли до него
function Toolbar({ theme }: ToolbarProps) {
  return (
    <div>
      <Button label="Сохранить" />
    </div>
  );
}

страница примера

Сначала предположите, что выведет код

Свойство "theme" отсутствует в типе "{ label: string; }" и является обязательным в типе "ButtonProps". Часть III приучила читать такие диагностики как подсказку: компилятор покажет каждое место, где цепочка порвалась, и до браузера ошибка не доедет. Плохо не то, что он ругается, а то, что править приходится каждый этаж по дороге — ради значения, которое нужно одному компоненту в самом низу.

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

Контекст состоит из трёх частей, и все три видны в одном примере. React.createContext создаёт саму «коробку» — она объявляется вне компонентов и живёт всё время работы приложения. Разметка <ThemeContext value={…}> кладёт в коробку значение для всего поддерева. А React.use(ThemeContext) внутри компонента достаёт ближайшее значение сверху.

tsx

interface Theme {
  background: string;
  color: string;
}

const LIGHT: Theme = { background: "#eeeeee", color: "#2a2735" };
const DARK: Theme = { background: "#2a2735", color: "#ffffff" };

// коробка создаётся один раз и вне компонентов: это не состояние,
// а адрес, по которому потом будут искать значение
const ThemeContext = React.createContext<Theme>(LIGHT);

function Button() {
  // use смотрит вверх по дереву и берёт ближайшее значение
  const theme = React.use(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      Сохранить
    </button>
  );
}

interface PanelProps {
  title: string;
}

function Panel({ title }: PanelProps) {
  console.log("рендер Panel — про тему он больше ничего не знает");
  return (
    <section>
      <h3>{title}</h3>
      <Button />
    </section>
  );
}

function App() {
  const [dark, setDark] = React.useState(false);
  return (
    <ThemeContext value={dark ? DARK : LIGHT}>
      <Panel title="Настройки" />
      <button id="toggle" onClick={() => setDark((d) => !d)}>
        сменить тему
      </button>
    </ThemeContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

interface Theme {
  background: string;
  color: string;
}

const LIGHT: Theme = { background: "#eeeeee", color: "#2a2735" };
const DARK: Theme = { background: "#2a2735", color: "#ffffff" };

// коробка создаётся один раз и вне компонентов: это не состояние,
// а адрес, по которому потом будут искать значение
const ThemeContext = React.createContext<Theme>(LIGHT);

function Button() {
  // use смотрит вверх по дереву и берёт ближайшее значение
  const theme = React.use(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      Сохранить
    </button>
  );
}

interface PanelProps {
  title: string;
}

function Panel({ title }: PanelProps) {
  console.log("рендер Panel — про тему он больше ничего не знает");
  return (
    <section>
      <h3>{title}</h3>
      <Button />
    </section>
  );
}

function App() {
  const [dark, setDark] = React.useState(false);
  return (
    <ThemeContext value={dark ? DARK : LIGHT}>
      <Panel title="Настройки" />
      <button id="toggle" onClick={() => setDark((d) => !d)}>
        сменить тему
      </button>
    </ThemeContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

страница примера

Сначала предположите, что выведет код

Panel снова ничего не знает про тему: в PanelProps остался один title. При этом кнопка меняет цвет — значение доехало через этаж, который его не передавал. Пропсы идут по одной ступеньке за раз; контекст перепрыгивает всё поддерево сразу.

Часть	Где пишется	Что делает
`React.createContext(значение)`	один раз, рядом с типами	создаёт контекст и задаёт значение по умолчанию
`<Context value={…}>`	в разметке компонента-владельца	кладёт значение для всего поддерева
`React.use(Context)`	в теле компонента-читателя	берёт ближайшее значение сверху

Про запись провайдера: с React 19 сам контекст и есть компонент, поэтому пишут <ThemeContext value={…}>. В коде постарше вы увидите <ThemeContext.Provider value={…}> — это то же самое, старая форма пока работает. Про чтение: до use() контекст читали хуком useContext(ThemeContext), и он никуда не делся. Разница в правилах: use() можно вызвать внутри if или цикла, а useContext — нет; почему хуки такие капризные, разбирает следующая глава.

Тип значения задаётся дженериком: createContext<Theme>(LIGHT). Дальше его проверяют оба конца — и провайдер, и читатель. Значение theme в Button имеет тип Theme без единой аннотации, а мимо провайдера не пройдёт ничего чужого.

Положим в провайдер строку вместо объекта — контекст создан с типом Theme, и компилятор ловит подмену на месте.

tsx

interface Theme {
  background: string;
  color: string;
}

const ThemeContext = React.createContext<Theme>({
  background: "#eeeeee",
  color: "#2a2735",
});

function App() {
  return <ThemeContext value="тёмная">{null}</ThemeContext>;
}

страница примера

Сначала предположите, что выведет код

Тип "string" не может быть назначен для типа "Theme". Ошибка указывает на атрибут value — то есть на строку провайдера, а не на далёкого читателя, которому потом прилетело бы не то.

А что будет, если провайдера над компонентом нет вовсе? Ниже две одинаковые кнопки: первая внутри провайдера, вторая — соседним элементом, рядом с ним, а не под ним. Предскажите, что произойдёт со второй: ошибка при рендере, предупреждение в консоли или что-то третье?

tsx

interface Theme {
  background: string;
  color: string;
}

const ThemeContext = React.createContext<Theme>({
  background: "#eeeeee",
  color: "#2a2735",
});

interface ButtonProps {
  label: string;
}

function Button({ label }: ButtonProps) {
  const theme = React.use(ThemeContext);
  console.log(label, "видит фон", theme.background);
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      {label}
    </button>
  );
}

function App() {
  return (
    <div>
      <ThemeContext value={{ background: "#2a2735", color: "#ffffff" }}>
        <Button label="внутри" />
      </ThemeContext>
      <Button label="снаружи" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

Никакой ошибки: снаружи видит фон #eeeeee. Не найдя ни одного провайдера по дороге вверх, React берёт значение, переданное в createContext, — и делает это молча. Это и есть самая частая жалоба на контекст: «значение не приезжает». В девяти случаях из десяти читатель просто оказался выше провайдера, а вместо пустоты получил правдоподобную подделку.

«Контекст не работает» почти всегда значит «провайдер не над этим компонентом». Смотрите не на файл, а на дерево.

Лечится это типом. Если разумного значения по умолчанию не существует, честно так и напишите: null. Тип станет Theme | null, и компилятор потребует разобрать оба случая — ровно то сужение из части III, которое вы уже делали руками.

tsx

interface Theme {
  background: string;
  color: string;
}

// null вместо «разумного значения»: забытый провайдер должен быть заметен
const ThemeContext = React.createContext<Theme | null>(null);

interface ButtonProps {
  label: string;
}

function Button({ label }: ButtonProps) {
  const theme = React.use(ThemeContext);
  if (theme === null) {
    console.log(label, "— провайдера над этим компонентом нет");
    return <mark>{label}: нет темы</mark>;
  }
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      {label}
    </button>
  );
}

function App() {
  return (
    <div>
      <ThemeContext value={{ background: "#2a2735", color: "#ffffff" }}>
        <Button label="внутри" />
      </ThemeContext>
      <Button label="снаружи" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

Теперь отсутствие провайдера видно и в кадре, и в выводе. Проверка стоит одну строку, зато случай «забыли обернуть» перестаёт быть невидимым.

Уберём if и обратимся к полю напрямую — компилятор напомнит про вариант с null ещё до запуска.

tsx

interface Theme {
  background: string;
  color: string;
}

const ThemeContext = React.createContext<Theme | null>(null);

function Button() {
  const theme = React.use(ThemeContext);
  return <button style={{ background: theme.background }}>Сохранить</button>;
}

страница примера

Сначала предположите, что выведет код

Возможно, "theme" имеет значение null. Диагностика приходит на строку с theme.background: контекст типизирован честно, поэтому забыть про случай без провайдера уже нельзя.

Провайдеров может быть много, и вложенный перекрывает внешний для своего поддерева — так делают тёмную врезку на светлой странице. Пример ниже считает уровень вложенности: каждая Section читает уровень и объявляет для детей уровень на единицу больше. Заголовков три, вложенность — три. Предскажите три числа в выводе.

tsx

// уровень вложенности: значение по умолчанию — самый верхний
const LevelContext = React.createContext(1);

function Heading() {
  const level = React.use(LevelContext);
  console.log("заголовок уровня", level);
  return <p>заголовок уровня {level}</p>;
}

interface SectionProps {
  children: React.ReactNode;
}

function Section({ children }: SectionProps) {
  const level = React.use(LevelContext);
  return (
    <LevelContext value={level + 1}>
      <fieldset>{children}</fieldset>
    </LevelContext>
  );
}

function App() {
  return (
    <Section>
      <Heading />
      <Section>
        <Heading />
        <Section>
          <Heading />
        </Section>
      </Section>
    </Section>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

разбор вывода
2 3 4, а не 1 2 3. Причина в порядке: Section читает контекст до собственного провайдера и потому получает значение снаружи — своё же значение видят только дети. Компонент, который кладёт значение, сам его не видит.

Задача в конце статьи проверяет именно это правило.

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

Дерево, а не файл. use() ищет по цепочке родителей во время рендера — примерно как closest() из части II ищет предка в DOM.

Контекст любят считать оптимизацией: «значение больше не идёт через середину — значит, середина не перерисовывается». Половина этого правда, и проверить обе половины можно одним примером. Shell держит два состояния — тему и никак не связанный с ней счётчик тиков; Toolbar приходит в него через children и контекст не читает; Button внутри Toolbar читает. Жмём «тик» — счётчик тиков к теме отношения не имеет. Предскажите, какие строки появятся после разделителя в выводе.

tsx

interface Theme {
  background: string;
  color: string;
}

const ThemeContext = React.createContext<Theme>({
  background: "#eeeeee",
  color: "#2a2735",
});

function Button() {
  const theme = React.use(ThemeContext);
  console.log("рендер Button");
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      Сохранить
    </button>
  );
}

function Toolbar() {
  console.log("рендер Toolbar");
  return (
    <div>
      <Button />
    </div>
  );
}

interface ShellProps {
  children: React.ReactNode;
}

function Shell({ children }: ShellProps) {
  const [dark, setDark] = React.useState(false);
  const [ticks, setTicks] = React.useState(0);
  console.log("рендер Shell");
  const value: Theme = {
    background: dark ? "#2a2735" : "#eeeeee",
    color: dark ? "#ffffff" : "#2a2735",
  };
  return (
    <ThemeContext value={value}>
      <button id="tick" onClick={() => setTicks((t) => t + 1)}>
        тик {ticks}
      </button>
      <button id="toggle" onClick={() => setDark((d) => !d)}>
        тема
      </button>
      {children}
    </ThemeContext>
  );
}

function App() {
  return (
    <Shell>
      <Toolbar />
    </Shell>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
// «тик» к теме отношения не имеет: смотрим, кто перерисуется
setTimeout(() => {
  console.log("--- нажали «тик»");
  document.getElementById("tick")!.click();
}, 50);

interface Theme {
  background: string;
  color: string;
}

const ThemeContext = React.createContext<Theme>({
  background: "#eeeeee",
  color: "#2a2735",
});

function Toolbar() {
  console.log("рендер Toolbar");
  return (
    <div>
      <Button />
    </div>
  );
}

interface ShellProps {
  children: React.ReactNode;
}

function App() {
  return (
    <Shell>
      <Toolbar />
    </Shell>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
// «тик» к теме отношения не имеет: смотрим, кто перерисуется
setTimeout(() => {
  console.log("--- нажали «тик»");
  document.getElementById("tick")!.click();
}, 50);

страница примера

Сначала предположите, что выведет код

После разделителя печатаются две строки — рендер Shell и рендер Button, — а Toolbar молчит. Первая половина правила подтвердилась: середина действительно ни при чём — элемент <Toolbar /> создан в App, при рендере Shell он не пересоздаётся, и React оставляет его как есть.

А вот Button перерисовался из-за тика, который к теме отношения не имеет. Виновата строка const value = { … }: объект собирается заново на каждом рендере Shell, и для React это новое значение контекста — сравнение идёт по ссылке, как в статье «Объекты и массивы в состоянии». Все читатели, сколько бы их ни было и как бы глубоко они ни лежали, получают команду перерисоваться.

Контекст не уменьшает число рендеров. Он убирает пропсы — это про читаемость, а не про скорость.

Если значение — одна из двух заранее известных тем, собирать объект в рендере незачем: две константы модуля, и ссылка меняется только при настоящей смене темы.

tsx

interface Theme {
  background: string;
  color: string;
}

const LIGHT: Theme = { background: "#eeeeee", color: "#2a2735" };
const DARK: Theme = { background: "#2a2735", color: "#ffffff" };

const ThemeContext = React.createContext<Theme>(LIGHT);

function Button() {
  const theme = React.use(ThemeContext);
  console.log("рендер Button");
  return (
    <button style={{ background: theme.background, color: theme.color }}>
      Сохранить
    </button>
  );
}

interface ShellProps {
  children: React.ReactNode;
}

function Shell({ children }: ShellProps) {
  const [dark, setDark] = React.useState(false);
  const [ticks, setTicks] = React.useState(0);
  console.log("рендер Shell");
  return (
    <ThemeContext value={dark ? DARK : LIGHT}>
      <button id="tick" onClick={() => setTicks((t) => t + 1)}>
        тик {ticks}
      </button>
      {children}
    </ThemeContext>
  );
}

function App() {
  return (
    <Shell>
      <Button />
    </Shell>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => {
  console.log("--- нажали «тик»");
  document.getElementById("tick")!.click();
}, 50);

interface Theme {
  background: string;
  color: string;
}

const LIGHT: Theme = { background: "#eeeeee", color: "#2a2735" };
const DARK: Theme = { background: "#2a2735", color: "#ffffff" };

const ThemeContext = React.createContext<Theme>(LIGHT);

interface ShellProps {
  children: React.ReactNode;
}

function App() {
  return (
    <Shell>
      <Button />
    </Shell>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => {
  console.log("--- нажали «тик»");
  document.getElementById("tick")!.click();
}, 50);

страница примера

Сначала предположите, что выведет код

После «тика» печатается только рендер Shell: значение контекста осталось той же ссылкой, и читателей никто не трогал. Когда значение приходится вычислять, ссылку удерживают через useMemo — это отдельный разговор в главе про скорость.

Самое живучее заблуждение: раз значение видно отовсюду, значит, контекст — это глобальная переменная, в которую можно писать. Проверим. В примере объект настроек лежит в модуле, он же передан в провайдер, а обработчик прибавляет двойку прямо в поле. Предскажите две вещи: что напечатает console.log и что покажет кадр.

tsx

interface Settings {
  fontSize: number;
}

// объект живёт в модуле — как state из части II
const settings: Settings = { fontSize: 14 };
const SettingsContext = React.createContext<Settings>(settings);

function Label() {
  const value = React.use(SettingsContext);
  console.log("рендер Label:", value.fontSize);
  return <span>размер шрифта: {value.fontSize}</span>;
}

function App() {
  return (
    <SettingsContext value={settings}>
      <Label />
      <button
        id="grow"
        onClick={() => {
          settings.fontSize += 2;
          console.log("в объекте теперь", settings.fontSize);
        }}
      >
        увеличить
      </button>
    </SettingsContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("grow")!.click(), 50);

страница примера

Сначала предположите, что выведет код

В выводе в объекте теперь 16, на экране — по-прежнему 14, а после клика не появилось ни одной новой строки «рендер Label»: перерисовки не было вовсе. Это ровно та ситуация, из-за которой в части II приходилось звать render() руками. React перерисовывает по команде setState или dispatch, а createContext ничего не хранит и ни за чем не следит: это труба, а не бак.

Значит, рабочая связка всегда одинакова: состояние живёт в компоненте наверху — useState или useReducer из прошлой статьи, — а контекст только раздаёт его вниз. Причём удобно класть в два контекста: в один значение, в другой dispatch. Функция dispatch от React стабильна и не меняется между рендерами, поэтому компоненты, которым нужно только отправлять действия, не будут дёргаться на каждое изменение данных.

tsx

type CartAction =
  | { type: "add"; title: string }
  | { type: "clear" };

interface CartState {
  items: string[];
}

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case "add":
      return { items: [...state.items, action.title] };
    case "clear":
      return { items: [] };
  }
}

const CartContext = React.createContext<CartState>({ items: [] });
// dispatch из useReducer не меняется от рендера к рендеру, поэтому
// отдельный контекст для него никого не будет дёргать зря
const CartDispatch = React.createContext<React.Dispatch<CartAction>>(() => {});

function CartCount() {
  const cart = React.use(CartContext);
  console.log("рендер CartCount:", cart.items.length);
  return <strong>в корзине: {cart.items.length}</strong>;
}

function AddButton() {
  const dispatch = React.use(CartDispatch);
  return (
    <button id="add" onClick={() => dispatch({ type: "add", title: "молоко" })}>
      добавить молоко
    </button>
  );
}

function Aisle() {
  // ни одного пропса: и счётчик, и кнопка берут своё сверху
  return (
    <div>
      <CartCount />
      <AddButton />
    </div>
  );
}

function App() {
  const [cart, dispatch] = React.useReducer(cartReducer, { items: [] });
  return (
    <CartContext value={cart}>
      <CartDispatch value={dispatch}>
        <Aisle />
      </CartDispatch>
    </CartContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => document.getElementById("add")!.click(), 100);

type CartAction =
  | { type: "add"; title: string }
  | { type: "clear" };

interface CartState {
  items: string[];
}

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case "add":
      return { items: [...state.items, action.title] };
    case "clear":
      return { items: [] };
  }
}

const CartContext = React.createContext<CartState>({ items: [] });
// dispatch из useReducer не меняется от рендера к рендеру, поэтому
// отдельный контекст для него никого не будет дёргать зря
const CartDispatch = React.createContext<React.Dispatch<CartAction>>(() => {});

function CartCount() {
  const cart = React.use(CartContext);
  console.log("рендер CartCount:", cart.items.length);
  return <strong>в корзине: {cart.items.length}</strong>;
}

function AddButton() {
  const dispatch = React.use(CartDispatch);
  return (
    <button id="add" onClick={() => dispatch({ type: "add", title: "молоко" })}>
      добавить молоко
    </button>
  );
}

function Aisle() {
  // ни одного пропса: и счётчик, и кнопка берут своё сверху
  return (
    <div>
      <CartCount />
      <AddButton />
    </div>
  );
}

function App() {
  const [cart, dispatch] = React.useReducer(cartReducer, { items: [] });
  return (
    <CartContext value={cart}>
      <CartDispatch value={dispatch}>
        <Aisle />
      </CartDispatch>
    </CartContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => document.getElementById("add")!.click(), 100);

страница примера

Сначала предположите, что выведет код

Aisle не принимает ни одного пропса, и всё-таки счётчик считает, а кнопка добавляет. Состояние по-прежнему одно и в одном месте — как объект state из части II, только теперь его нельзя случайно поменять мимо редьюсера, и любой компонент дерева получает ровно то, что просил.

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

Ситуация	Чем передавать
Значение нужно соседу или через один этаж	пропсами — это самый читаемый код
Тема, язык, текущий пользователь — нужны половине дерева	контекстом
Обёртке не важно, что внутри	пропсом `children`, контекст не нужен
Значение меняется на каждый символ ввода и нужно многим	контекстом, но отдельным от редко меняющегося

Отдельный контекст для часто меняющегося значения выручает, пока таких значений немного. Когда независимых кусков много и они лежат в одном объекте, перемена любого из них перерисовывает всех читателей, а не только тех, кому этот кусок нужен. Тут контекста уже мало: нужно хранилище, на которое подписываются по кусочку состояния. Где проходит эта граница и что берут за ней, разобрано на полке React и Next.

Контекст избавляет от пробрасывания: значение кладут провайдером наверху, а use(Context) берёт ближайшее значение сверху — этажи между ними о нём не знают.
Если провайдера над компонентом нет, React молча подставляет значение из createContext; тип T | null превращает эту ловушку в диагностику компилятора.
Провайдеры вкладываются, побеждает ближайший сверху; собственный провайдер компонент не видит — только его дети.
Контекст не сокращает рендеры: новый объект в value перерисовывает всех читателей, даже если изменилось не относящееся к делу состояние.
Контекст ничего не хранит — мутация значения экран не обновит. Состояние остаётся в useState или useReducer выше провайдера, а контекст только доставляет его вниз.

1/4Контекст создан как createContext<Theme>(LIGHT). Компонент, читающий его через use(), оказался выше провайдера в дереве. Что произойдёт?

2/4Компонент Section читает use(LevelContext) и тут же рендерит <LevelContext value={level + 1}> со своими детьми. Какое значение увидит сам Section?

3/4В компоненте-провайдере есть состояние, к теме не относящееся, а значение записано как value={{ background, color }}. Нажали кнопку, меняющую это постороннее состояние. Что произойдёт с компонентами, читающими контекст?

4/4Объект лежит в модуле и передан в провайдер. Обработчик клика меняет его поле напрямую: settings.fontSize += 2. Что увидит пользователь?

Убрать курьера

Header принимает user только чтобы передать его в Greeting. Перепишите пример на контекст: HeaderProps и GreetingProps должны исчезнуть, а на экране остаться «Привет, Рико!».

tsx

interface User {
  name: string;
}

interface HeaderProps {
  user: User;
}

interface GreetingProps {
  user: User;
}

function Greeting({ user }: GreetingProps) {
  return <span>Привет, {user.name}!</span>;
}

function Header({ user }: HeaderProps) {
  // Header пользователем не пользуется — только передаёт дальше
  return (
    <header>
      <Greeting user={user} />
    </header>
  );
}

function App() {
  const [user] = React.useState<User>({ name: "Рико" });
  return <Header user={user} />;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

Контекст объявляется рядом с типом, значение кладёт App, читает — Greeting. Про Header задача просто забывает, и это главный признак успеха.

tsxлистинг · не запускается

interface User {
  name: string;
}

const UserContext = React.createContext<User | null>(null);

function Greeting() {
  const user = React.use(UserContext);
  if (user === null) return <span>Гость</span>;
  return <span>Привет, {user.name}!</span>;
}

function Header() {
  return (
    <header>
      <Greeting />
    </header>
  );
}

function App() {
  const [user] = React.useState<User>({ name: "Рико" });
  return (
    <UserContext value={user}>
      <Header />
    </UserContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

interface User {
  name: string;
}

const UserContext = React.createContext<User | null>(null);

function Greeting() {
  const user = React.use(UserContext);
  if (user === null) return <span>Гость</span>;
  return <span>Привет, {user.name}!</span>;
}

function Header() {
  return (
    <header>
      <Greeting />
    </header>
  );
}

function App() {
  const [user] = React.useState<User>({ name: "Рико" });
  return (
    <UserContext value={user}>
      <Header />
    </UserContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Значение по умолчанию — null, поэтому компилятор потребовал разобрать случай без провайдера. Обратите внимание: состояние осталось в App, контекст только доставил его вниз.

Провайдер есть, а значения нет

В App провайдер стоит на месте, значение в него передано, но console.log печатает App получил: null. При этом Toolbar тему видит. Объясните, почему так, и почините чтение в App, не меняя Toolbar.

tsx

interface Theme {
  background: string;
  color: string;
}

const ThemeContext = React.createContext<Theme | null>(null);

function Toolbar() {
  const theme = React.use(ThemeContext);
  console.log("Toolbar получил:", theme);
  return <div style={{ background: theme?.background }}>панель</div>;
}

function App() {
  const [dark] = React.useState(true);
  const theme = React.use(ThemeContext);
  console.log("App получил:", theme); // ожидали объект, а придёт null
  return (
    <ThemeContext
      value={
        dark
          ? { background: "#2a2735", color: "#ffffff" }
          : { background: "#eeeeee", color: "#2a2735" }
      }
    >
      <Toolbar />
    </ThemeContext>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

App читает контекст среди своих предков, а его провайдер находится внутри его же разметки — то есть ниже. Компонент никогда не видит собственный провайдер, поэтому и получает значение по умолчанию.

Чинится разделением: тот, кто кладёт значение, и тот, кто читает, — разные компоненты. Достаточно вынести чтение в отдельный компонент под провайдером.

tsxлистинг · не запускается

function CurrentTheme() {
  const theme = React.use(ThemeContext);
  console.log("CurrentTheme получил:", theme); // объект темы
  return null;
}

function App() {
  const [dark] = React.useState(true);
  return (
    <ThemeContext
      value={
        dark
          ? { background: "#2a2735", color: "#ffffff" }
          : { background: "#eeeeee", color: "#2a2735" }
      }
    >
      <CurrentTheme />
      <Toolbar />
    </ThemeContext>
  );
}

function CurrentTheme() {
  const theme = React.use(ThemeContext);
  console.log("CurrentTheme получил:", theme); // объект темы
  return null;
}

function App() {
  const [dark] = React.useState(true);
  return (
    <ThemeContext
      value={
        dark
          ? { background: "#2a2735", color: "#ffffff" }
          : { background: "#eeeeee", color: "#2a2735" }
      }
    >
      <CurrentTheme />
      <Toolbar />
    </ThemeContext>
  );
}

Тот же приём выносят в отдельный компонент-провайдер: он держит состояние и рендерит {children}, а всё остальное приложение живёт под ним и читает контекст свободно.

Сделать забытый провайдер заметным

Провайдера в примере нет вообще, а на экране всё равно «Привет»: значение по умолчанию выглядит как настоящие данные. Измените объявление контекста и Hello так, чтобы отсутствие провайдера стало видно — сначала компилятору, а потом и на экране. Разметку App не трогайте.

tsx

interface Lang {
  code: string;
  hello: string;
}

// значение по умолчанию выбрано «на всякий случай» — и прячет ошибку
const LangContext = React.createContext<Lang>({ code: "ru", hello: "Привет" });

function Hello() {
  const lang = React.use(LangContext);
  console.log("Hello видит язык", lang.code);
  return <p>{lang.hello}</p>;
}

function App() {
  // провайдера нет вовсе, а на экране всё равно «Привет»
  return <Hello />;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

Значение по умолчанию заменяется на null, тип становится Lang | null. После этого обращение lang.code перестанет компилироваться — компилятор скажет Возможно, "lang" имеет значение null, и проверку придётся написать.

tsxлистинг · не запускается

const LangContext = React.createContext<Lang | null>(null);

function Hello() {
  const lang = React.use(LangContext);
  if (lang === null) {
    console.log("Hello: провайдера языка нет");
    return <mark>язык не задан</mark>;
  }
  return <p>{lang.hello}</p>;
}

const LangContext = React.createContext<Lang | null>(null);

function Hello() {
  const lang = React.use(LangContext);
  if (lang === null) {
    console.log("Hello: провайдера языка нет");
    return <mark>язык не задан</mark>;
  }
  return <p>{lang.hello}</p>;
}

Значение по умолчанию имеет смысл только тогда, когда оно и правда разумно для всего приложения — например, светлая тема. Во всех остальных случаях null честнее: он превращает молчаливую подмену в ошибку компилятора.

Контекст: данные без пробрасывания

Видеоразбор темы за 5–7 минут

Пропс, который никому не нуженЦена подъёма состояния — этажи-курьеры

createContext, провайдер и use()Значение кладут сверху, читают снизу

Значение по умолчанию — тихая ловушкаКомпонент вне провайдера не падает, а врёт

Побеждает ближайший сверхуПровайдеры вкладываются, и значение переопределяется

Кто перерисуется, когда значение сменилосьКонтекст убирает пропсы, но не рендеры

Контекст — доставка, а не хранилищеМенять значение по-прежнему умеет только состояние

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Убрать курьера

Провайдер есть, а значения нет

Сделать забытый провайдер заметным