Почему таймер начинает показывать рандомные числа?

Question

Почему с каждой секундой таймер начинает скакать с рандомными числами? Со временем страница очень сильно нагружается.

 import React from "react";
    import "./styles.css";
    
    export default function App() {
      const [timer, setTimer] = React.useState(10)
      React.useEffect(()=> {
        setInterval(()=>{setTimer(timer - 1)}, 1000)  
      })
     
      return (
        <div className="App">
          <h2>{timer}</h2>
        </div>
      );
    }

Answer 1

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

Вот как это поправить в вашей реализации:

const [timer, setTimer] = React.useState(10)
  React.useEffect(()=> {
    setInterval(()=>{setTimer((value) => value - 1)}, 1000)
  }, [])

  return (
      <div className="App">
        <h2>{timer}</h2>
      </div>
  );

БЛОГ НА HUSL

Почему таймер начинает показывать рандомные числа?

Ответы (1 шт):