コンポーネント内で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;

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2022-02-08 (火) 05:53:57