Почему useEffect не должен принимать async-функцию напрямую?

Условие

В React написано useEffect(async () => { const roles = await loadRolesData(userId); setRoles(roles); }, [userId]). Пользователь может смениться до ответа. Как исправить контракт эффекта и гонку результатов?

Ответ

Эффект должен вернуть cleanup-функцию или ничего, а async callback возвращает Promise. Объявите асинхронную функцию внутри эффекта и игнорируйте её результат после cleanup.

useEffect(() => {
  let active = true;
  async function load() {
    try {
      const data = await loadRolesData(userId);
      if (active) setRoles(data);
    } catch {
      if (active) setError('Не удалось загрузить роли');
    }
  }
  setRoles([]); setError(null);
  load();
  return () => { active = false; };
}, [userId]);

Если загрузчик поддерживает отмену, добавьте её для экономии ресурсов. Сам список ролей в UI не заменяет серверную проверку прав.