Как работает таймер — setInterval в жизненном цикле React приложения?

Question

[pinkhead_psd]

Приветствую, возник вопрос во время работы с таймером. Суть задачи состоит в том, что требуется подгружать данные с сервера и затем их отрисовать по таймеру. Пример как это должно работать, есть state pageLoad, который по умолчанию false. По запуску таймера, состояние меняется на true, useEffect считывает изменения и если значение true запускает функцию. Она в свою очередь, производит запросы и какие-то вычисления и меняет значение на false. Но после изменения useEffect видит все равно true и запускает еще раз это функцию

сonst [pageLoad, setPageLoad] = useState(false)

  useEffect(() => {
    if(pageLoad === true){
      test()
    }
  }, [pageLoad]);  

  const timer = setInterval(() => {
    setPageLoad(true)
    console.log(`поставил значение TRUE`);
  }, 10000)

  function test(){
    console.log(pageLoad);
    setPageLoad(false)
  }

Результат кода должен раз в 20 сек выводить значение true. Но вместо этого происходит первая отработка и выводится значение 1, а потом уже как раз срабатывает два раза функция и выводит сразу 2 значения

Comments

[WbICHA]

Тебя не смущает, что ты создаёшь новый интервал на каждом рендере?
И причём здесь вообще макротаски и жизненный цикл реакта?

[Антон Горецкий]

Вот есть примерчик, глянь

[WbICHA]

Антон Горецкий, это из какого века пример?

[pinkhead_psd]

WbICHA, но благодаря этому примеру и твоему сарказму, я понял суть. Искал щепку, но бревна и не заметил. Решил просто сделать функцию и каждую секунду прибавлять к переменной значение. Как доходит до определенного можно и отправлять запрос

[WbICHA]

pinkhead_psd, я хз каким образом этот пример мог помочь в решении твоей проблемы, ведь в этом примере нет ничего полезного.