Что такое контекст и хук useContext в React

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

Контекст удобен, когда определённые данные (например, текущий пользователь, язык, тема) нужны во многих компонентах одновременно.

Зачем нужен Context?

• Избегает prop drilling — необходимости передавать данные через множество промежуточных компонентов.
• Позволяет удобно работать с глобальными данными:
  • Авторизация
  • Тема оформления (light / dark)
  • Локализация
  • Настройки приложения

Пример использования Context API

Создание контекста

import { createContext } from "react";

const ThemeContext = createContext("light");

Оборачивание компонентов в Provider

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Чтение данных с помощью useContext

import { useContext } from "react";

function Header() {
  const theme = useContext(ThemeContext);
  return <h1 className={`header ${theme}`}>Привет!</h1>;
}

Теперь компонент Header знает, что тема — "dark", без пропсов!

useContext: как работает?

const value = useContext(ContextObject);

• Позволяет получить текущее значение контекста
• Работает только внутри компонента, обёрнутого в Context.Provider
• Обновляется автоматически, когда значение в Provider меняется

Пример со сменой темы

const ThemeContext = createContext("light");

function ThemeSwitcher() {
  const theme = useContext(ThemeContext);
  return <button className={`btn-${theme}`}>Сменить тему</button>;
}

Когда не стоит использовать контекст

• Для часто обновляемых значений (например, текущее значение инпута)
• Когда можно передать данные напрямую через пропсы (контекст = "тяжёлая артиллерия")

Итог

• Контекст нужен, чтобы удобно делиться данными между компонентами без лишней передачи пропсов.
• Хук useContext позволяет легко получить доступ к значению контекста.
• Подходит для темы, языка, настроек пользователя, глобального состояния.