React useEffectの使い方を完全解説【初心者向け】

Reactを学び始めると必ず登場するのが useEffect。
「いつ実行されるの？」「依存配列って何？」と混乱しやすいフックです。

この記事では、下記の3つに分けて紹介しています。

実際のコードを参考に、分かりやすく解説します。

useEffectとは？

useEffect は 「コンポーネントの副作用を扱うためのフック」 です。

副作用とは、例えば次のような処理です。

useEffect(() => {
　// 副作用の処理
}, []);

useEffect(() => {
　console.log("実行されました");
}, []);

useEffect(() => {
　console.log("初回のみ実行");
}, []);

📌 空の配列 [] を渡すと初回のみ実行されます。

const [count, setCount] = useState(0);

useEffect(() => {
　console.log(“countが変わりました”, count);
}, [count]);

📌 count が変わるたびに実行されます。

useEffect(() => {
　console.log("毎回実行される");
});

📌 依存配列を書かないと毎回実行されます。

⚠️ パフォーマンス悪化の原因になるため、基本的には非推奨です。

イベント登録やタイマーは後片付けが必要です。

useEffect(() => {
  const timer = setInterval(() => {
    console.log("1秒ごと");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

📌 return で返した関数が クリーンアップ処理になります。

➡ count が変わる → useEffect 実行 → setCount → 無限ループ