Почему обработчик отправки формы может срабатывать дважды?

Двойной вызов обработчика отправки формы — классическая проблема, с которой сталкиваются и новички, и опытные разработчики. Причина почти всегда кроется в том, как именно событие submit распространяется по DOM или как фреймворк управляет жизненным циклом компонента.

Основные причины

• Всплытие события. Событие submit всплывает от формы к родителям. Если обработчик навешен и на форму, и на родительский контейнер, он сработает дважды.
• Кнопка с type="submit" и отдельный onClick. Клик по кнопке вызывает и click, и submit — если оба обрабатываются, логика выполнится дважды.
• React StrictMode. В dev-режиме React намеренно монтирует компоненты дважды, чтобы выявить побочные эффекты. Если обработчик регистрируется в useEffect без очистки, он добавится два раза.
• Двойная регистрация слушателя. Например, addEventListener вызван и в useEffect, и в обработчике события без removeEventListener.

Пример проблемы и решения

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault(); // обязательно, иначе страница перезагрузится
    console.log('submit');
  };

  useEffect(() => {
    const form = document.querySelector('form');
    form.addEventListener('submit', handleSubmit);
    // без cleanup слушатель добавится повторно при повторном монтировании
    return () => form.removeEventListener('submit', handleSubmit);
  }, []);

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Send</button>
    </form>
  );
}

В этом примере обработчик навешен и через JSX, и через addEventListener — это гарантированный двойной вызов. Достаточно оставить один способ регистрации.

Как диагностировать

1. Поставьте console.trace() внутри обработчика — стек покажет, откуда пришёл каждый вызов.
2. Проверьте, нет ли обработчика на родителе формы и не всплывает ли событие.
3. Убедитесь, что кнопка не имеет одновременно onClick и type="submit".
4. В React проверьте cleanup в useEffect и поведение StrictMode.

Итог: двойной submit почти всегда связан с дублированием регистрации обработчика или всплытием события. Правильный подход — один обработчик на форме, обязательный preventDefault и корректная очистка слушателей в useEffect.