YanoRyuichi.com/
Wiki
Blog
GitHub
Sandbox
開始行:
* useEffectでレースコンディションを防ぐ [#a103ca00]
** レースコンディションが発生しうるコード [#xf1d2c0b]
import { useEffect, useState } from "react";
function App() {
const [id, setId] = useState(0);
const [name, setName] = useState("");
useEffect(() => {
void (async () => {
const response = await fetch(`https://swapi.dev/ap...
const data = await response.json();
setName(data.name);
})();
}, [id]);
return (
<div className="App">
<button
onClick={() => {
const id = Math.round(Math.random() * 30);
setId(id);
}}
>
Fetch data
</button>
<p>ID: {id}</p>
<p>Name: {name}</p>
</div>
);
}
export default App;
- ボタンを押すと、idがランダムで決まり、そのidのデータを...
- APIからの取得はuseEffect内で非同期で行っている
- この時、ボタンを連打すると、その都度idが変わりuseEffect...
- APIは非同期なので、前のAPIの取得(fetch())に時間が掛か...
** レースコンディションが発生しないコード [#ld3e768c]
useEffect(() => {
let cancel = false;
void (async () => {
const response = await fetch(`https://swapi.dev/api...
const data = await response.json();
if (!cancel) {
setName(data.name);
}
return () => {
cancel = true;
}
})();
}, [id]);
- useEffectでクリーンアップ関数を指定すると、そのコンポー...
- これを利用してレースコンディションを防ぐ
- 上のように、useEffect内でcancelというフラグを用意し、そ...
- これによって、ボタンを連打した場合、後のAPIが呼ばれる時...
終了行:
* useEffectでレースコンディションを防ぐ [#a103ca00]
** レースコンディションが発生しうるコード [#xf1d2c0b]
import { useEffect, useState } from "react";
function App() {
const [id, setId] = useState(0);
const [name, setName] = useState("");
useEffect(() => {
void (async () => {
const response = await fetch(`https://swapi.dev/ap...
const data = await response.json();
setName(data.name);
})();
}, [id]);
return (
<div className="App">
<button
onClick={() => {
const id = Math.round(Math.random() * 30);
setId(id);
}}
>
Fetch data
</button>
<p>ID: {id}</p>
<p>Name: {name}</p>
</div>
);
}
export default App;
- ボタンを押すと、idがランダムで決まり、そのidのデータを...
- APIからの取得はuseEffect内で非同期で行っている
- この時、ボタンを連打すると、その都度idが変わりuseEffect...
- APIは非同期なので、前のAPIの取得(fetch())に時間が掛か...
** レースコンディションが発生しないコード [#ld3e768c]
useEffect(() => {
let cancel = false;
void (async () => {
const response = await fetch(`https://swapi.dev/api...
const data = await response.json();
if (!cancel) {
setName(data.name);
}
return () => {
cancel = true;
}
})();
}, [id]);
- useEffectでクリーンアップ関数を指定すると、そのコンポー...
- これを利用してレースコンディションを防ぐ
- 上のように、useEffect内でcancelというフラグを用意し、そ...
- これによって、ボタンを連打した場合、後のAPIが呼ばれる時...
ページ名: