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