setInterval Re-rendu illimité des composants de réaction complète. Pourquoi cela se produit-il et comment y remédier ?

Question

Voici mon code de réaction. Cela rend le composant à nouveau rendu à l'infini :

const [seconds, setSeconds] = useState(60)
useEffect(() => {
    const interval = setInterval(() => {
        setSeconds(seconds => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
}, []);

console.log("object");

Answer 1

Cela se produit parce que vous n'effacez l'intervalle que lorsque le composant est déchargé, ce qui ne se produit que lorsque l'utilisateur quitte la page.

C'est peut-être ce dont vous avez besoin ? Lorsque l'intervalle atteint 0, je l'efface. Mais pour cela, je dois utiliser la référence, je ne peux pas utiliser l'état de setInterval car il n'a qu'une valeur initiale :

export default function App() {
  const [seconds, setSeconds] = useState(5);
  const secondsRef = useRef(seconds);

  useEffect(() => {
    const interval = setInterval(() => {
      if (secondsRef.current < 0) {
        clearInterval(interval);
      }

      secondsRef.current = secondsRef.current - 1;
      setSeconds((seconds) => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  console.log("running", new Date());

  return 
 {seconds < 0 ? "Time is up!" : seconds} 
;
}