JavaScript/React/useEffect/コンポーネント内でsetInverval()を使うのバックアップの現在との差分(No.1)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
JavaScript/React/useEffect/コンポーネント内でsetInverval()を使うへ行く。
- 1 (2022-02-08 (火) 05:49:08)

追加された行はこの色です。
削除された行はこの色です。

#author("2022-02-08T05:49:08+09:00","default:ryuichi","ryuichi")
#author("2022-02-08T05:53:57+09:00","default:ryuichi","ryuichi")
* コンポーネント内でsetInverval()を使う [#zac54d1e]

** 正常に動作しないコード [#l76c8cc6]

 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()が一気に呼ばれることになる

** 正常に動作するコード [#r9d7e10d]

 import { useEffect, useState } from "react";
 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;