Effect を置かない判断
React 公式ドキュメントから取ったもの。useEffect の使いどころは
2026年時点で推奨が反転した箇所で、以前は標準的だったデータ取得の書き方が
今は勧められていない。
useState や useContext を含む React の基本的な書き方は
React にある。
useEffect でデータを取得しない
Effect は「逃げ道」であって、React の外にある仕組みと同期させるためのもの。
外部の仕組みと同期させようとしているのでなければ、おそらく Effect は要らない。
上の例のように Effect の中で fetch を書くと、4つの問題がついてくる。
| 問題 | 中身 |
|---|---|
| 競合状態 | 応答が送った順に返るとは限らない。上の例はこの対策が入っていない |
| サーバーで動かない | サーバーが返す最初の HTML には、データではなくローディング表示しか入らない |
| ネットワークの滝 | 親が取り終わってから子が取り始める。並行にならない |
| 先読みもキャッシュもない | 再マウントのたびに取り直す |
推奨は、フレームワークの取得機構を使うこと。 クライアントだけで完結させるなら、TanStack Query や useSWR のような キャッシュを持つ仕組みを使う。
自前で書くなら、最低限、後片付けで競合状態を潰す。
useEffect(() => {
let ignore = false;
fetch(url)
.then((res) => res.json())
.then((json) => {
if (!ignore) setData(json);
});
return () => {
ignore = true;
};
}, [url]);カスタムフックに切り出しておくと、後で効率のよい取得方法へ移りやすい。
そもそも Effect が要らない場面
2つは、書く前に疑う。
描画のためにデータを加工する → コンポーネントの最上位で計算する
state を更新すると描画からやり直しになる
利用者の操作に反応する → イベントハンドラに書く
Effect が走る時点では「何が起きたか」が分からない
判断の仕方が示されている。
「なぜこのコードが動く必要があるのか」を問い、
コンポーネントが利用者に表示されたから 動くべきものだけを Effect に置く。
これは原則の 「なんのためか目的を考える」を、この場面に当てたもの。