Спам-запросы useEffect

Question

Состояние

const [user, setUser] = useState({});

checkIfUserIsEnabled ()

 async function checkIfUserIsEnabled() {
  const res = await fetch("http://localhost:8080/users/finduserbytoken?id=" + 
    getTokenIdFromURL);
    res.json()
   .then(res => setUser(res))
   .catch(err => setErrors(err));
}

useEffect Когда я вызываю мой checkIfUserIsEnabled() в useEffect ниже он визуализируется один раз и отображает ложную версию в методе возврата.

    useEffect(() => {
        verifyEmail(getTokenIdFromURL);
        checkIfUserIsEnabled();
        return () => {
            /* cleanup */
        };
    }, [/* input */])`

useEffect (2th) Если вместо этого я делаю это, он продолжает рассылать спамзапросы к моему API и отображает true.

    useEffect(() => {
        checkIfUserIsEnabled();
      });

Возврат

    return (
        <div className="emailVerificationWrapper">
        {user.enabled 
            ? <h1>Thank you for registrating, {user.firstName}. Account is verified!</h1> 
            : <h1>Attempting to verify account...</h1>}
        </div>
    )

На мой вопрос (-ы): Почему второе использование влияет на спам? и есть ли способ, которым я могу сделать запрос каждые 2-3 секунды вместо спама? и могу ли я заставить его прекратить выполнять запрос, когда он действительно вернет true?

Answer 1

Хук эффекта запускается как при монтировании компонента, так и при его обновлении. Поскольку мы устанавливаем состояние после каждой выборки данных, компонент обновляется, и эффект запускается снова.

Он извлекает данные снова и снова. Это ошибка и ее следует избегать. Мы хотим получать данные только при монтировании компонента. Вот почему вы можете предоставить пустой массив (или что-то, что не изменяется) в качестве второго аргумента для ловушки эффекта, чтобы избежать его активации при обновлении компонента (или только при изменении этого параметра), но только для монтирования компонента.

let URL = `http://localhost:8080/users/finduserbytoken?id=`;
async function checkIfUserIsEnabled() {
  const res = await fetch(`$(URL)` + 
    getTokenIdFromURL);
    res.json()
   .then(res => {setUser(res); return Promise.resolve()})
   .catch(err =>  {setErrors(err); return Promise.reject()});
}

 useEffect(() => {
 const abortController = new AbortController();
    const fetchData = async() => await checkIfUserIsEnabled();
    fetchData();

  return () => {
    abortController.abort();
  };
  }, [URL]);

Answer 2

useEffect(() => {
    checkIfUserIsEnabled();
}); <-- no dependency

Поскольку ваш useEffect не имеет никакой зависимости, он будет запускаться при каждом рендеринге, поэтому каждый раз, когда вы изменяете какое-то состояние и ваш компонент повторного рендеринга, он будет отправлять запросы.