PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Что такое Strict Mode в React?

Основы React

StrictMode — dev-инструмент React: обёртка, включающая дополнительные проверки для раннего выявления багов. На production-сборку не влияет вовсе.

Подключение

createRoot(root).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Можно оборачивать и часть дерева.

Что делает (в dev)

Двойной вызов рендера. Функции компонентов, инициализаторы useState, редьюсеры вызываются дважды — так всплывают нечистые рендеры (мутации, побочные эффекты в теле компонента): чистой функции двойной вызов безразличен, грязная проявит себя.

Двойное монтирование (React 18+). mount → unmount → mount: эффекты выполняются, чистятся и выполняются снова. Проверка, что каждый useEffect имеет честный cleanup: забытая отписка, дублирующийся запрос, неотменённый таймер станут видны сразу, а не «иногда в проде». Это же готовит код к переиспользованию состояния (offscreen/Activity).

Предупреждения об устаревших API: UNSAFE_-методы жизненного цикла, старый Context API, findDOMNode.

Практические следствия

  • «Почему запрос уходит два раза?» — самый частый вопрос новичков: это StrictMode, и это не баг, а сигнал писать идемпотентные эффекты с cleanup (отмена запроса, флаг).
  • Отключать StrictMode, чтобы «починить» двойной вызов, — прятать проблему.
  • В production двойных вызовов нет — проверки вырезаются.

Коротко для собеседования

StrictMode — dev-обёртка с проверками: двойной вызов рендера (ловит нечистые компоненты), двойное монтирование с прогоном эффектов (ловит забытые cleanup), предупреждения об устаревших API. В проде не работает; двойной запрос при монтировании в dev — его нормальное поведение, а не баг.

Другие вопросы раздела