Effect を置かない判断

React 公式ドキュメントから取ったもの。useEffect の使いどころは 2026年時点で推奨が反転した箇所で、以前は標準的だったデータ取得の書き方が 今は勧められていない。

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 に置く。

関連

• ユーザー体験の目標 — ネットワークの滝は LCP に効く