React でデータを取得し、競合状態(レースコンディション)を回避するにはどうすればよいですか?

Question

Accepted Answer

基本的なアプローチでは `useEffect` を使いますが、**クリーンアップ**と**順序が前後するレスポンス**を適切に扱わないと、古いデータや警告が発生します。

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## これが防ぐ競合状態

例えば `id` が `1` から `2` へ素早く変わるとします。キャンセルしないと、両方のリクエストが進行中になります。もしリクエスト `1` が遅く、リクエスト `2` の**後に**解決すると、ユーザー `2` に対してユーザー `1` のデータを表示してしまいます:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

前のリクエストを中断する(クリーンアップ)ことでこれが解決します。古いブール値フラグのパターン(`let active = true; ... if (active) setUser(...)`)も、古いレスポンスを無視することで同じ効果を実現します。

## 実際のアプリではライブラリを使う

手動のフェッチは繰り返しが多く、キャッシュやリトライを見落としがちです。**React Query (TanStack Query)** や **SWR** は、ローディング/エラー状態、キャッシュ、重複排除、バックグラウンド再取得、stale-while-revalidate を肩代わりしてくれます:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Next.js のようなフレームワークでは、サーバーサイドのデータローダーがしばしば望ましい選択肢になります。