Что такое Context?

Context (Context API) в React — это механизм передачи данных через дерево компонентов без прокидывания props вручную на каждом уровне (без prop drilling).

Проблема, которую решает

Когда данные (тема, язык, пользователь) нужны многим компонентам на разной глубине, передавать их через props на каждом уровне утомительно (prop drilling). Context делает данные доступными «напрямую».

Как использовать

// 1. Создать контекст
const ThemeContext = createContext('light');

// 2. Предоставить значение
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// 3. Получить в любом потомке
function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>OK</button>;
}

Когда применять

• Глобальные, редко меняющиеся данные: тема, локаль, авторизованный пользователь, настройки.
• Избежать prop drilling для сквозных данных.

Ограничения

• Ре-рендеры: при изменении значения контекста все потребители перерисовываются. Для часто меняющихся данных Context неэффективен — лучше стейт-менеджер или разделение контекстов.
• Не полноценная замена Redux/Zustand для сложного состояния (нет средств оптимизации, middleware, devtools).

Context против стейт-менеджеров

• Context — транспорт данных (передача), не хранилище с логикой.
• Redux/Zustand — управление сложным состоянием с оптимизацией.

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

Context API передаёт данные через дерево без prop drilling: createContext → Provider (значение) → useContext (чтение). Для глобальных редко меняющихся данных (тема, локаль, юзер). Минус — при изменении значения перерисовываются все потребители; для сложного/частого состояния используют стейт-менеджер.