Бесконечный цикл useEffect, ка исправить?

Question

[Юрий Иванов]

Учу реакт недавно и столкулся с каким-то непониманием
есть три функции, которые выполняются при клики на пагниацию (сама страница, стрелки вперед-назад)
при этом при клике на любую из этих кнопок должна срабатывать функция
Идеальная ситуация для юз эффекта, подумал я, но я улетаю в бесконечный цикл, как это поправить и почему это так работает

const findReposInex = () => {
    if (repos.length > 1) {
      setCurrentRepos(repos.slice(0, elementsCount));
    }
  };

const handleClickNext = () => {
    githubPageref.current = page + 1;
    getMoreRepos();
    // eslint-disable-next-line no-use-before-define
    if (page < amount.length) {
      setPage((prevValue) => {
        return prevValue + 1;
      });
    }
  };

useEffect(() => {
    findReposInex();
  }, [handleClickPrev,handleClickNext]);

Comments

[Gary_Ihar]

Ты в зависимости эффекта вкинул функции которые на каждый рендер новые создаются

[Юрий Иванов]

Gary_Ihar, ну как я понимаю, что я меняю стейт, что вызывает рендер и поэтому я улетаю в бесконечный цикл, но как это исправить, это же полюбому должно так работать (через эффект)

[Владимир Проскурин]

Не, у вас правда handleClickNext на каждый рендер создается новая, а т.к. эта переменная в зависимостях у эффекта, он вызывается и вызывает функцию findReposInex , а она в свою очередь меняет стейт через setCurrentRepos, после чего происходит перерендер и опять заново создается handleClickNext и вызывается эффект. И так вечно.

[Gary_Ihar]

Ты улетаешь в рендер потому что функции обработчики пересоздаются и юзЕффект это замечает и вызывает findRepos... В котором обновляется стейт и все по новой
Делай другую зависимость

[Владимир Проскурин]

В данном случае, будто достаточно в useCallback обернуть функции.