Может ли React.StrictMode приводить к двойному срабатыванию кода и в каких случаях?

React.StrictMode — это специальный компонент-обёртка, который включает дополнительные проверки в режиме разработки. Он не рендерит никакого DOM и не влияет на production-сборку, но в dev-режиме намеренно вызывает некоторые функции дважды, чтобы выявить небезопасные побочные эффекты.

Что именно вызывается дважды

• Тело функционального компонента (рендер) — вызывается дважды, чтобы поймать нечистые вычисления.
• Функции-инициализаторы useState, useMemo, useReducer — вызываются дважды.
• Эффекты useEffect: монтирование, размонтирование и повторное монтирование — чтобы проверить корректность очистки.
• Некоторые lifecycle-методы классовых компонентов (constructor, render, shouldComponentUpdate).

Пример

function Counter() {
  const [count, setCount] = useState(() => {
    console.log('init'); // вызовется дважды в StrictMode
    return 0;
  });

  useEffect(() => {
    console.log('mount'); // mount - unmount - mount
    return () => console.log('cleanup');
  }, []);

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Зачем это нужно

Двойной вызов помогает обнаружить компоненты, которые не являются чистыми: например, мутируют внешние переменные, делают запросы прямо в теле рендера или не очищают подписки в useEffect. Если после двойного вызова поведение ломается — значит, код содержит скрытый побочный эффект.

Важно: StrictMode не удваивает обработчики событий (onClick и т.п.) и не влияет на production. Двойной вызов происходит только в dev-режиме и только для перечисленных выше случаев.

Итог: StrictMode стоит включать в разработке, чтобы раньше находить небезопасные побочные эффекты; в production он не создаёт двойных вызовов и не влияет на производительность.