> Что такое React Context и как работает хук useContext (React)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: ООО Премиум ИТ Солюшен, Софт Медиа Групп, Exness, Сфера

Стек: React

> Пример ответа

React Context - это механизм в React, который позволяет передавать данные через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Он решает проблему «prop drilling», когда данные нужно передать глубоко вложенным компонентам.

Хук useContext - это способ подписаться на контекст и получить его текущее значение внутри функционального компонента. Работает это так:

Сначала создается контекст с помощью React.createContext(), который возвращает объект с двумя компонентами: Provider и Consumer.
Provider оборачивает часть дерева компонентов и принимает проп value - данные, которые нужно сделать доступными.
Любой дочерний компонент внутри Provider может вызвать useContext(MyContext), чтобы получить текущее значение контекста.

Пример:

JSX
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext); // 'dark'
  return <div>Тема: {theme}</div>;
}

Когда значение value в Provider изменяется, все компоненты, использующие useContext, автоматически перерендериваются. Важно помнить, что контекст не оптимизирован для частых обновлений - для таких случаев лучше использовать стейт-менеджмент (например, Redux или Zustand).