ReactのuseEffectは、関数コンポーネントで副作用（effect）を扱うためのフックです。副作用とは、データ取得、DOM操作、イベント登録、タイマー設定など、レンダリング以外の処理を指します。クラスコンポーネントでいうcomponentDidMountやcomponentDidUpdate、componentWillUnmountの役割をまとめて担うのがuseEffectです。つまりライフサイクルのことです。

基本的な書き方は以下の通りです。

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

第1引数には実行したい処理、第2引数には依存配列を指定します。依存配列が省略されると、レンダリングのたびに実行されます。空配列[]を指定すると初回レンダリング時のみ実行され、特定の値を入れると、その値が変化したときだけ再実行されます。

また、useEffectの中で関数をreturnするとクリーンアップ処理として扱われます。これはコンポーネントのアンマウント時や、次のeffect実行前に呼ばれ、イベントリスナーの解除やタイマーの停止などに使われます。

useEffect(() => {
  const id = setInterval(() => {}, 1000);
  return () => clearInterval(id);
}, []);

useEffectを正しく使うことで、状態変化に応じた安全で読みやすいコードが書けます。依存配列の指定漏れはバグの原因になりやすいため、ESLintの警告も活用しながら設計することが重要です。

① 初心者向け：ReactのuseEffectをやさしく理解する

useEffectは、Reactで「画面表示以外の処理」を行うための仕組みです。たとえば、APIからデータを取得する、タイマーを動かす、クリックイベントを登録するといった処理が該当します。

基本形は次のとおりです。

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

[]（空配列）を指定すると、画面が最初に表示されたときだけ実行されます。
もし配列に値を入れると、その値が変わったときに再実行されます。

useEffect(() => {
  console.log(count);
}, [count]);

また、後片付けが必要な処理（タイマーやイベント）は、returnでクリーンアップを書きます。

useEffect(() => {
  const id = setInterval(() => {}, 1000);
  return () => clearInterval(id);
}, []);

useEffectは「いつ・なぜ実行されるか」を意識することが大切です。依存配列の意味を理解できると、Reactがぐっと分かりやすくなります。

② 実務向け：useEffectの役割と「よくある罠」

実務でのuseEffectは、副作用を状態変化に同期させるために使います。重要なのは「何に依存して再実行されるか」を正確に設計することです。

よくある罠①：無限ループ

useEffect(() => {
  setCount(count + 1);
}, [count]);

依存しているcountをeffect内で更新すると、再レンダリング → 再実行が繰り返され、無限ループになります。
👉 状態更新が必要な場合は、条件分岐や依存の見直しが必須です。

よくある罠②：依存配列の書き忘れ

useEffect(() => {
  fetchData();
}, []);

実はfetchDataが外で定義されていると、最新の値を参照できないケースがあります。
👉 ESLint（exhaustive-deps）の警告は基本的に無視しないのが安全です。

よくある罠③：イベントリスナーの解除忘れ

クリーンアップを書かないと、メモリリークや多重登録の原因になります。

useEffect(() => {
  window.addEventListener("click", handler);
  return () => window.removeEventListener("click", handler);
}, []);

useEffectは便利ですが、使いすぎないことも実務では重要です。
「本当に副作用か？」を一度考える習慣が、保守性の高いReactコードにつながります。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Gogo

最新記事 by Gogo (全て見る)

• ReactのuseEffectとは - 2025年12月28日
• React の useRef をわかりやすく解説 - 2025年11月30日
• ReactのuseCallbackとは？ - 2025年10月28日