Почему эти функции работают по-разному?

В вашем первом примере unmounted всегда будет false после каждого рендера.

Вот правильный путь без использования глобального экземпляра:

function Component() {
  const [emailSent, setEmailSent] = useState(false);
  const unmounted = useRef(false);

  async function handleSendEmail(formValues) {
    try {
      await AuthApi.sendRecoverAccountEmail('123');
      !unmounted.current && setEmailSent(true);
    } catch (err) {
      !unmounted.current && setIsSendingEmail(false);
    }
  }

  useEffect(() => {
    return () => {
      unmounted.current = true;
    };
  }, []);
}

Интересный вопрос. Вы можете найти FAQ о хуках полезным, так как я думаю, что он довольно конкретно отвечает на ваш вопрос.

В вашем первом примере ваш несмонтированный var является частью свойств вашего компонента, а во втором примере он просто выбирается как часть закрытия javascript.

Обычно вы хотите убедиться, что изменили смонтированный параметр как часть метода жизненного цикла componentDidUnmount.

Я думаю, что если вы добавите unmounts в список зависимостей, это может сработать? Обычно я использую реагирование из другого фреймворка в Clojurescript, так что я не совсем знаком с семантикой основного интерфейса javascript, но по крайней мере это было бы причиной того, почему вы получаете предупреждение для первого примера.

В вашем первом примере, что произойдет, если вы измените последнюю часть на следующую?

useEffect(() => {
  return () => {
   unmounted = true;
  };
 }, [unmounted]);
}

Возможно, вам потребуется определить unmounts как более формальное свойство реагирования, а не просто заключенное свойство в вашем компоненте.