Context.Provider
Тема дорожной карты · React
Провайдер контекста — это паттерн React-компонента, делающий значение доступным для любого дочернего компонента в дереве без передачи его через каждый промежуточный компонент в виде пропсов. Вы создаёте контекст с помощью React.createContext, затем оборачиваете поддерево компонентом <Context.Provider value={...}>, а потребляющие компоненты получают значение через хук useContext. Провайдер контекста — рекомендованное React-решение для совместного использования глобального состояния, такого как текущий пользователь, тема оформления или локаль, по всему дереву компонентов. Поскольку каждый компонент, потребляющий контекст, перерендеривается при изменении значения провайдера, он лучше всего подходит для состояния, которое меняется редко или действительно должно быть глобальным. Совместное использование провайдера контекста с useState или useReducer — это облегчённая альтернатива внешним библиотекам состояния для многих фронтенд-приложений.
Как это работает
Context.Provider позволяет пробросить данные через дерево компонентов, не передавая их через 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.Provider: весь app-state в одном Context (всё ререндерится на любое изменение); inline value-объект даёт ререндер каждый рендер; Context там, где state-библиотека работала бы лучше (нет devtools, нет time-travel, нет selector-level подписок); путаница Context с глобальным state — это всего лишь shortcut от prop drilling. Разделяйте Context по concern (UserContext, ThemeContext), чтобы ограничить blast radius.