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