コンポーネント内でsetInverval()を使う

正常に動作しないコード

 import { useEffect, useState } from "";
 import "./App.css";
 
 function App() {
   const [count, setCount] = useState(0);
 
   const interval = setInterval(() => {
     setCount((prevCounter) => prevCounter + 1);
   }, 1000);
 
   return (
     <div className="App">
       <h1>Count: {count}</h1>
     </div>
   );
 }
 
 export default App;

• Appコンポーネントがマウント、レンダーされるたびにsetInterval()が呼ばれ溜まっていく
  • setInterval()内でsetCount()しているのでsetCount()が終わるとAppコンポーネントはレンダーされる
• すべてのsetInterval()内でsetCount()されるので、複数のsetCount()が一気に呼ばれることになる

正常に動作するコード

 import { useEffect, useState } from "";
 import "./App.css";
 
 function App() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCount((prevCounter) => prevCounter + 1);
     }, 1000);
     return () => clearInterval(interval);
   }, []);
 
   return (
     <div className="App">
       <h1>Count: {count}</h1>
     </div>
   );
 }
 
 export default App;