Почему useEffect может вызываться два раза в React?

Question

В React 18 в режиме разработки useEffect может вызываться два раза из-за StrictMode. Это сделано специально, чтобы выявлять небезопасные побочные эффекты. В продакшене такого поведения нет. Два вызова помогают обнаружить код, который не готов к повторному выполнению.

YeaHub · Accepted Answer

ОпределениеStrictMode — это режим React, который помогает находить потенциальные ошибки, намеренно вызывая некоторые операции повторно.Что именно происходитПеред перечислением важно понимать: это не баг, а диагностическое поведение.React монтирует компонентВызывает useEffectВызывает cleanupМонтирует компонент ещё разСнова вызывает useEffectuseEffect(() => {
  console.log("effect");
  return () => {
    console.log("cleanup");
  };
}, []);
В режиме разработки лог будет:"effect""cleanup""effect"Зачем React так делаетПроверяет, корректно ли работает cleanupВыявляет:неотменённые подпискидублирующиеся запросынебезопасные побочные эффектыЗаставляет писать устойчивый кодПочему это важно для запросовЕсли запрос:Делается без cleanupНе отменяетсяНе защищён от race condition— вы увидите двойной запрос в dev-режиме.Как с этим работатьВсегда использовать cleanupНе полагаться на “однократность” эффектаПонимать разницу между dev и prodВыводДвойной вызов useEffect в React — это следствие StrictMode. Он помогает находить ошибки в работе с побочными эффектами и делает код надёжнее.