Context API
Тема дорожной карты · React
React Context API — это встроенный механизм управления состоянием, позволяющий передавать данные по дереву компонентов без ручной передачи пропсов на каждом уровне. Context решает проблему «prop drilling», создавая глобально-подобное хранилище, ограниченное поддеревом React, — что делает его идеальным для передачи тем оформления, настроек локали, состояния аутентификации и данных текущего пользователя. Контекст создаётся с помощью createContext(), значения предоставляются через компонент <Provider>, а дочерние компоненты получают значение с помощью хука useContext. React Context API не является заменой специализированных библиотек управления состоянием — таких как Redux или Zustand — для сложных, часто обновляемых данных, но является стандартным React-решением для редко меняемого глобального состояния. Понимание Context API — обязательное условие для работы с продвинутыми паттернами React, кастомными хуками и большинством современных React-фреймворков, включая Next.js.
Как это работает
Context API позволяет пробросить данные через дерево компонентов, не передавая их через props на каждом уровне. createContext(default) возвращает пару {Provider, Consumer}; оборачиваете поддерево в <Provider value={...}>, любой потомок читает через useContext(Context). Context ререндерит всех consumers при изменении value по ссылке — <Provider value={{theme, setTheme}}> inline даёт ререндер каждый рендер (мемоизируйте объект).
Когда применять
Context — для по-настоящему глобальных, редко меняющихся данных: текущий пользователь, тема, локаль, feature flags. Пропустите его для high-frequency state (позиция мыши, ввод формы) — каждый consumer ререндерится на каждое изменение. Для app-state с селекторами и middleware — state-библиотека (Zustand, Redux Toolkit, Jotai). Композиция (передача children сверху) часто бьёт Context на 1-2 уровнях drilling.
Типичные ошибки
Ловушки Context API: весь app-state в одном Context (всё ререндерится на любое изменение); inline value-объект даёт ререндер каждый рендер; Context там, где state-библиотека работала бы лучше (нет devtools, нет time-travel, нет selector-level подписок); путаница Context с глобальным state — это всего лишь shortcut от prop drilling. Разделяйте Context по concern (UserContext, ThemeContext), чтобы ограничить blast radius.