PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Для чего используется Context API?

DOM и браузер

Context API в React используют для передачи данных через дерево компонентов без prop drilling — обычно для глобальных, редко меняющихся данных: темы, локали, пользователя.

Для чего используют

Когда данные нужны многим компонентам на разной глубине, Context избавляет от прокидывания props через каждый уровень:

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

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

// 3. Получить в любом потомке
const theme = useContext(ThemeContext);

Типичные применения

  • Тема (светлая/тёмная).
  • Локаль/язык (i18n).
  • Авторизованный пользователь.
  • Настройки приложения.
  • Передача store стейт-менеджера.

Ограничения

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

Context как транспорт

Context передаёт данные, но сам не управляет состоянием — значение задаёт useState/useReducer в провайдере.

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

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

Другие вопросы раздела