YanoRyuichi.com/
Wiki
Blog
GitHub
Sandbox
開始行:
* コンポーネント内で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コンポーネントがマウント、レンダーされるたびにsetInt...
-- setInterval()内でsetCount()しているのでsetCount()が終...
- すべてのsetInterval()内でsetCount()されるので、複数のse...
** 正常に動作するコード [#r9d7e10d]
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;
終了行:
* コンポーネント内で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コンポーネントがマウント、レンダーされるたびにsetInt...
-- setInterval()内でsetCount()しているのでsetCount()が終...
- すべてのsetInterval()内でsetCount()されるので、複数のse...
** 正常に動作するコード [#r9d7e10d]
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;
ページ名:
