setInterval 無限制重新渲染反應完整元件。為什麼會發生這種情況以及如何解決？

Question

這是我的反應程式碼。它使元件無限重新渲染：

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

console.log("object");

Answer 1

發生這種情況是因為您僅在元件卸載時清除間隔，這僅在使用者離開頁面時才會發生。

也許這就是您所需要的？當間隔達到 0 時，我將清除它。但為此我必須使用引用，我不能使用 setInterval 中的狀態，因為它只有初始值：

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} 
;
}