Зачем нужна библиотека React Context?

React Context — встроенный механизм React (не отдельная библиотека) для передачи данных вниз по дереву компонентов без проброса через каждый уровень props.

Проблема: prop drilling

Тема оформления нужна кнопке на пятом уровне вложенности — без контекста её пришлось бы протащить через все промежуточные компоненты, которым она не нужна:

<App theme={theme}>
  <Layout theme={theme}>
    <Sidebar theme={theme}>
      <Menu theme={theme}>
        <Button theme={theme} /> // только здесь нужна

Решение через Context

const ThemeContext = createContext('light');

// 1. Провайдер кладёт значение
<ThemeContext.Provider value={theme}>
  <Layout /> {/* промежуточные уровни ничего не знают */}
</ThemeContext.Provider>

// 2. Любой потомок читает
const Button = () => {
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
};

Для чего использовать

Редко меняющиеся «окружающие» данные: тема, локаль/переводы, текущий пользователь и права, конфигурация, инстансы сервисов (api-клиент). Библиотеки (React Router, Redux, React Query) сами построены на контексте.

Ограничения

• Изменение value перерендеривает всех потребителей — контекст не подходит для часто меняющегося состояния (ввод, скролл).
• Нет селекторов «подписаться на кусочек» — только всё value целиком.
• value-объект нужно мемоизировать, иначе каждый рендер провайдера будит потребителей.

Коротко для собеседования

Context решает prop drilling: провайдер кладёт значение, любой потомок читает через useContext, минуя промежуточные props. Подходит для темы, локали, пользователя — редко меняющихся данных. Для частых обновлений не годится: все потребители перерендериваются целиком, селекторов нет.