Как сделать, чтобы useEffect не срабатывал бесконечное кол-во раз?

Question

[Егор Тельнов]

Здравствуйте, есть такой код:

const dispatchDataToState = data => {
        const { ai, player, X, O, list } = data.result;
        props.setScore(player, ai, X, O);
        props.setGameList(list);
    };

    useEffect(() => {
        axios
            .get("http://localhost:3001/api/score")
            .then(response => {
                if (response.data.ok) {
                    dispatchDataToState(response.data);
                } else throw new Error("Server side error");
            })
            .catch(err => console.error(err));
    });

Если смотреть консоль, то запрос на сервер идет бесконечно, это и логично. Если передать в useEffect массив вторым аргументом, то React выкидывает предупреждение, мол внешняя зависимость. Как сделать это правильно? Сколько не читаю понять не могу

Answer 1

[Тигран Абрамян]

Что бы useEffect сработал один раз, только при активаций.
То как вы и сказали нужно передать пустой массив вторым аргументом.

useEffect(() => {
  axios
    .get("http://localhost:3001/api/score")
    .then(response => {
      if (response.data.ok) {
          dispatchDataToState(response.data);
      } else throw new Error("Server side error");
    })
    .catch(err => console.error(err));
}, []);

Думайте о втором аргументе как о зависимости для этого эффекта. Если одна из зависимостей изменилась с прошлого раза, эффект запустится снова.

Предупреждение как таковой не влияет на работу кода и функционал будет работать.

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

Или можно просто отключить предупреждение

useEffect(() => {
  // code

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Comments

[Егор Тельнов]

спасибо

[Vadicus]

Спасибо, действительно добавление второго аргумента в виде пустого массива работало.