- 追加された行はこの色です。
- 削除された行はこの色です。
#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;