Странное поведение setInterval с useState в React?

Question

[steklovatnik]

Разбирался с useEffect, решил на примере секундомера попрактиковаться. Итог - происходит черти что, счетчик постоянно ускоряется, и как-будто отсчитывается до нового значения заново от нуля каждую секунду, что происходит? почему так?

P.S. без useEffect тоже так работает

Код ниже:

import { useState, useEffect } from "react";

export default function Stopwatch(props) {

  const [number, setNumber] = useState(0);

  useEffect(() => {
    setInterval(() => {
      console.log("ticking");
      setNumber((prevCount) => prevCount + 1);
    }, 1000);
  });

  return (
    <div className="stopwatch">
      <h2>stopwatch</h2>
      <div>{number}</div>
    </div>
  );
}

Answer 1

[Александр]

useEffect без массива значений, за которым надо следить (dependencies), будет срабатывать при каждом рендере. Изменение состояния вызывает новый рендер, который в свою очередь вызывает useEffect.
Исправить можно так:

useEffect(() => {
    const intervalId = setInterval(() => {
        console.log("ticking");
        setNumber((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
}, []);

Comments

[steklovatnik]

Большое спасибо за ответ! Но остается вопрос, почему без useEffect происходит тоже самое?
И, если я правильно понимаю, частота рендера около 60 кадров/сек, а в счетчике постоянно увеличивается скорость пополнения, почему же так?

[Александр]

steklovatnik, Потому что setInterval Вы не очищаете. На первый рендер он один, на второй - два, на третий - три и т.д.. Причем, количество рендеров будет расти стремительно, т.к. каждый такой setInterval будет его вызывать.

[steklovatnik]

Александр, это я понял, но не понял, почему так происходит)
Что вызывает новые экземпляры setInterval каждый рендер?
я привык, что если задать ему вызов в 1000мс, то так и будет, пока его не отменить

[Александр]

steklovatnik, вызывает ререндер компонента setNumber, который используется в setInterval:

Монтирование -> setNumber -> рендер
Ререндер-> setNumber + 1 от прошлого рендера -> 2 рендера
x2 Ререндер -> setNumber + 2 от прошлого рендера -> 4 рендера (было запущена уже 2 setInterval и каждый еще раз вызвал рендер)
и т.д.