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

Определение

StrictMode — это режим React, который помогает находить потенциальные ошибки, намеренно вызывая некоторые операции повторно.

Что именно происходит

Перед перечислением важно понимать: это не баг, а диагностическое поведение.

1. React монтирует компонент

2. Вызывает useEffect

3. Вызывает cleanup

4. Монтирует компонент ещё раз

5. Снова вызывает useEffect

useEffect(() => {
  console.log("effect");
  return () => {
    console.log("cleanup");
  };
}, []);

В режиме разработки лог будет:

1. "effect"

2. "cleanup"

3. "effect"

Зачем React так делает

1. Проверяет, корректно ли работает cleanup

2. Выявляет:

   • неотменённые подписки

   • дублирующиеся запросы

   • небезопасные побочные эффекты

3. Заставляет писать устойчивый код

Почему это важно для запросов

Если запрос:

1. Делается без cleanup

2. Не отменяется

3. Не защищён от race condition

— вы увидите двойной запрос в dev-режиме.

Как с этим работать

1. Всегда использовать cleanup

2. Не полагаться на “однократность” эффекта

3. Понимать разницу между dev и prod

Вывод

Двойной вызов useEffect в React — это следствие StrictMode. Он помогает находить ошибки в работе с побочными эффектами и делает код надёжнее.