React Academy · Урок

Когда не следует использовать контекст

Определяйте случаи, когда передача свойств, композиция или менеджер состояния подходят лучше.

«Когда не следует использовать контекст» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы узнаете, когда React Context является неподходящим инструментом, и научитесь распознавать ситуации, в которых передача свойств, композиция или менеджер состояния подходят лучше и проще.

Контекст — не универсальное решение

Контекст часто используют чрезмерно. Разработчики обращаются к нему, чтобы избежать любой передачи свойств, но это создаёт скрытые зависимости, усложняет проверку компонентов и может ухудшить производительность.

Когда свойства подходят лучше

Если значение используется 1–3 тесно вложенными компонентами, передача свойств проще, понятнее и удобнее для отслеживания. Контекст добавляет шаблонный код поставщика и скрывает поток данных.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Когда композиция подходит лучше

Если нужно избежать проброса через 3 и более уровней, сначала попробуйте композицию: передайте полностью отрисованного потребителя как свойство. Контекст не потребуется, а поток данных останется явным.

Контекст создаёт скрытую связанность

Компонент, вызывающий useContext(UserCtx), нельзя повторно использовать без обёртывания в UserProvider. Свойства делают зависимости явными — по сигнатуре можно точно увидеть, что требуется компоненту.

Часто изменяющиеся значения

Не используйте Context для значений, которые меняются много раз в секунду, например для положения мыши или хода анимации. Каждое изменение повторно отрисовывает всех потребителей. Вместо этого используйте ссылки, внешние хранилища или библиотеку на основе сигналов.

Контекст — не менеджер состояния

Контекст только распространяет значения — в нём нет встроенного кэширования, инструментов разработчика или промежуточного ПО. Для сложного общего состояния с частыми обновлениями используйте Zustand, Redux или Jotai — они созданы именно для этой задачи.

Состояние сервера не относится к контексту

Данные, полученные с сервера, например список пользователей или публикации, не следует хранить в Context. React Query, SWR или RTK Query управляют состоянием сервера с кэшированием, фоновой повторной загрузкой и состояниями ошибок — Context ничего из этого не предоставляет.

Состояние формы не относится к контексту

Управление полями формы через Context приводит к повторной отрисовке всех потребителей контекста при каждом нажатии клавиши. Вместо этого используйте локальное состояние компонента или библиотеку форм, например React Hook Form.

Когда Context — правильный инструмент

Context идеально подходит для текущего пользователя и состояния аутентификации, темы (светлой или тёмной), локали и интернационализации, а также других стабильных сквозных значений, которые читают многие компоненты, но которые редко меняются.

Быстрая проверка

Какой тип данных LEAST подходит для хранения в React Context?

Повторение

Используйте Context для стабильных сквозных значений, таких как аутентификация, тема и локаль. Для передачи на 1–3 уровня предпочитайте свойства. Чтобы избежать проброса, предпочитайте композицию. Для состояния сервера используйте React Query, а для сложного общего состояния — Zustand или Redux.

Курс завершён

Поздравляем! Вы завершили курс **Шаблоны и производительность React Context**. Теперь Вы знаете, как разделять контексты, мемоизировать значения, применять селекторы и, что не менее важно, когда вообще не следует использовать Context.

Часто задаваемые вопросы

Урок «Когда не следует использовать контекст» бесплатный?

Да — полный текст урока «Когда не следует использовать контекст» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Когда не следует использовать контекст»?

Определяйте случаи, когда передача свойств, композиция или менеджер состояния подходят лучше. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Когда не следует использовать контекст»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Разделение контекстов для ограничения повторных рендерингов
Мемоизация значений контекста с помощью useMemo
Паттерн селектора контекста
Когда не следует использовать контекст

← Назад к React Academy