Reactを使い始めた際に、「副作用」という言葉や「いつデータを取得するか」「イベントリスナーを登録・解除するタイミングがわからない」と感じることは多いと思います。useEffectはそのような疑問を整理し、コンポーネントのレンダリング以外の処理を安全かつ効率的に扱うためのフックです。本記事では、React useEffectとは 使い方を軸に、仕組みからよくある落とし穴、最新APIの使い分けまで深く解説します。
目次
React useEffectとは 使い方の基本構造
ReactのuseEffectとは、副作用を実行するためのフックで、関数コンポーネントのレンダリング後に特定の処理を同期または非同期で行いたいときに使います。使い方としては、関数コンポーネント内でimport後、useEffect(() => { … }, […]) の形式で宣言します。ここで第一引数が実行する処理、第二引数は依存配列であり、依存する値が変化したときに副作用を再実行するかを制御します。依存配列を省略するとレンダリングごとに実行され、空配列[]ならマウント時のみ、特定の値を入れるとその値が変わるたびに実行されます。
また、第一引数の関数はオプションでクリーンアップ関数を返すことができ、これを使ってイベントリスナーの解除やタイマーの停止などを行います。最新情報を踏まえると、Reactでは副作用のライフサイクルが厳格化され、依存関係の指定ミスを検知するルールやループを防ぐための仕組みも強化されています。
useEffectの宣言と依存配列（dependencies）の使い方
useEffectを宣言するとき、第二引数である依存配列は必ず第一引数の中で使われているReactのstateやpropsなどの「リアクティブな値」を全て含めなければなりません。これにより、副作用が古い値を参照する「スタレークロージャー」問題を防ぎます。依存配列を空にすることで初回マウント時のみ実行されます。省略するとレンダーごとに毎回実行されます。
依存配列にオブジェクトや関数を入れる際は注意が必要です。それらはレンダリングごとに新しく生成されるため、依存配列の値が毎回異なり、副作用が頻繁に再実行される原因になります。必要ならオブジェクトや関数をEffectの内部で生成するか、useMemoやuseCallbackでメモ化することで安定させます。
クリーンアップ関数の使い方
副作用の中で、登録したイベントリスナーやタイマー、サブスクリプションなど、コンポーネントがアンマウントまたは依存する値が変わるときに解除または停止すべき処理がある場合、クリーンアップ関数を返します。これは第一引数の関数内で return () => { … } の形で記述します。Reactは再レンダー前やアンマウント時にこの関数を呼び、副作用の後始末を行います。
Strict Modeが有効な場合、開発環境ではマウント時に設定→解除→再設定という挙動がシミュレートされ、副作用の設定とクリーンアップがきちんとペアになっているかを検証します。クリーンアップを忘れるとメモリリークやイベントの重複登録、タイマーの過剰実行などが起きやすくなります。
useEffectのライフサイクル：実行タイミングと繰り返し条件
副作用は主に以下のタイミングで実行されます。初回マウント後、依存値が変化したとき、そしてアンマウント時のクリーンアップ。依存配列を省略すると毎レンダー後、空配列ならマウントとアンマウント時のみです。レンダリングのたびに副作用が重複する・不要に動いてしまうのを防ぐため、依存配列を適切に設定することが重要です。
また、レンダリング後にブラウザ描画が完了してから実行されるので、視覚的な変更を先に行いたいときにはuseLayoutEffectを利用することが推奨されます。通常の副作用ではuseEffectで十分であり、この差を理解して使い分けるとUIのちらつきやパフォーマンス問題を避けられます。
具体例で見るReact useEffectの使い方パターン
ここでは実際のユースケースに基づいて、React useEffectとは 使い方を明確にするための具体例を紹介します。パターンごとに適切な依存配列やクリーンアップ、エラーハンドリングを含めます。
データ取得（非同期処理）のパターン
たとえばコンポーネントのマウント時や prop の変更時に API を呼んでデータを取得する場合、useEffectの中で非同期関数を定義し、依存配列に変更を監視したい値を指定します。処理の途中でコンポーネントがアンマウントされたり、再レンダーで古いリクエストが残っている場合もあるため、クリーンアップで無視フラグを使うなどの対策が必要です。
イベントリスナー登録と解除のパターン
ブラウザのイベントやグローバルなサブスクリプションをコンポーネントが表示されている間だけ有効にしたいなら、useEffect内で addEventListener などを登録し、return 内で removeEventListener を記述します。このように登録と解除をセットにすることで、アンマウント時の cleanup や prop/state の変更時の重複登録を防げます。
タイマーや interval のパターン
一定間隔で何かを実行する必要がある場合は setInterval を useEffect 内で設定し、クリーンアップで clearInterval を使います。依存配列が interval の開始条件に影響する値を含むと、interval が再設定されるためループが起きる可能性があります。state の更新に依存しないよう updater 関数を使って内部の値を管理するのが効果的です。
React useEffectの落とし穴と最新の改善点
useEffectは強力ですが誤った使い方をするとバグやパフォーマンス低下の原因になります。ここでは典型的な間違いと、最新の React の改善機能を紹介し、その対応方法を説明します。
依存配列の指定ミスによる無限ループ
依存配列に関数やオブジェクトを直接入れてしまうと、毎レンダーごとにそれらが再生成されるため比較で変化と判定され、useEffectが無限ループするケースがあります。さらに state の更新と依存配列にその state があると、状態が変わるたびに Effect が再実行され続けます。これを防ぐには関数を useCallback、オブジェクトを useMemo でメモ化する、またはEffectを分割するなどが有効です。
スタレークロージャー問題と最新 props/state の参照
Effect 内で使う変数が古いまま「止まって」しまう現象がスタレークロージャーです。依存値を正しく指定していない場合に起きます。最新情報を得たいが Effect を再実行したくない変数については、React の新機能である useEffectEvent を使って「イベント部分」に分離することで、依存配列を汚さず安全に最新値を参照できます。
Strict Mode による二重マウントの影響
React の Strict Mode（開発モード）では、マウント直後に副作用を実行し、その後一度アンマウント→再マウントをシミュレートする動作があります。これにより、useEffect の初回実行が二度行われることがありますが、本番では発生しません。この挙動により cleanup の対称性が重要となり、不要な副作用の重複実行を防ぐ設計が求められます。
新しい API：useEffectEvent を使った便利な改善
React では最新の API である useEffectEvent を使って、Effect の中で読みたいが依存配列に含めたくない値を扱いやすくなりました。これにより、依存配列を最小限に保ちながら最新の props/state を参照でき、Effect自体を再設定することなく内部処理を最新に保てます。依存性管理やリント警告も改善されていて、より明確で安全なコードを書く助けになります。
React useEffectとは 使い方を他のフックとの比較で理解する
Reactのフックには複数あり、useEffectだけでなく useLayoutEffect や useInsertionEffect、useEffectEvent などもあります。これらを比較することで、React useEffectとは 使い方の選択肢が見え、どの状況でどのフックを使うべきかがわかります。
useEffect vs useLayoutEffect の違い
useEffect はレンダリング後、ブラウザの描画が完了した後に実行されます。視覚的な変更が描画開始前に必要な場合（例：要素のレイアウト取得、アニメーションの準備など）は useLayoutEffect を使うと、描画ブロックして同期的に処理できます。しかし useLayoutEffect はパフォーマンスへの影響が大きいため、通常の副作用には useEffect を使うのが標準的です。
useInsertionEffect の利用ケース
CSS in JS ライブラリなどでスタイルの挿入タイミングを制御したい場合や、DOMの変更が描画前に必要な場合には useInsertionEffect が使われます。特別なケースであり、多くのアプリケーションでは不要ですが、スタイルのフラッシュ防止や初期スタイルの整合性保持が要求される際に選択肢となります。
useEffectEvent を利用した副作用イベントの分離と利便性
前述の通り useEffectEvent は、Effect 本体の依存配列に含めたくないけれども最新の state や props を読みたい処理を分離するための仕組みです。イベントハンドラーや通知、ロギングなど、反応をトリガーするものではない処理に適しています。これを使うことでコードが読みやすくなり、依存性に関するリスクが下がります。
React useEffectを使った実践的なベストプラクティス
React useEffectとは 使い方の理解を深めたら、より良いコードを書くためのベストプラクティスを押さえておきましょう。保守性やパフォーマンス、安全性を確保する設計のポイントを紹介します。
コード構造の整理とカスタムフックの活用
副作用が複雑になる場合は、Effect 本体を分割し、共通処理や複数コンポーネントで使う処理はカスタムフックに抽出します。これにより再利用性が高まり、依存関係の管理が一元化でき、バグの温床を減らせます。例えばデータフェッチ、サブスクリプション管理、ローカルストレージ同期などがカスタムフックの代表例です。
依存配列の最小化と安定化
依存配列には必要な値だけを入れ、不要なオブジェクトや関数は useMemo や useCallback で安定させます。依存配列を過剰にすると無駄な再実行が起き、逆に不足すると古い値を参照する問題が発生します。リントツールもこれを検知して警告を出す仕組みが整っています。
非同期処理でのキャンセルとステート管理
API呼び出しなど非同期処理を行う場合、コンポーネントがアンマウントされたり依存値が変わった場合に途中の処理を無視する仕組みが必要です。具体的にはフラグを使う、AbortController を使ってフェッチをキャンセルする、Promise の無視ロジックを入れるなどです。これによりユーザーに古いデータが表示される・エラーになるなどの問題を回避できます。
パフォーマンス最適化とメモ化の活用
頻繁に変わらない props や state、関数を useEffect の依存値として使う場合、React の再描画が重くなることがあります。useMemo や useCallback を使ってその値をメモ化し、不要なレンダリングや effect の再実行を防ぎます。また、Effect の中で重い処理を行うなら、debounce や throttle を使う、あるいはワーカースレッドを検討することも有効です。
React useEffectとは 使い方 を理解するための比較表
複数のフックを比較することで、どの状況でどれを使うか判断しやすくなります。以下に useEffect, useLayoutEffect, useEffectEvent の特徴を表にまとめます。
| フック | 実行タイミング | 依存配列の振る舞い | 主な用途 |
|---|---|---|---|
| useEffect | レンダリング後にブラウザペイントを完了させてから実行される | 依存値が変化したとき／空配列でマウントのみ／省略で毎レンダー | データ取得、イベントリスナー登録、DOM外との同期等の副作用一般 |
| useLayoutEffect | ブラウザ描画の前（描画ブロックの同期的）に実行される | useEffectと似るが、描画前後の差が重要な依存はこちらで制御 | レイアウト計測、スクロール位置調整、アニメーション開始前など |
| useEffectEvent | Effectの中でイベントとして呼び出すため、Effect本体は依存値に応じて制御されるが内部は最新値を参照 | Effect本体の依存は限定的に保たれる。内部で参照する値は依存配列に含めない | 最新props/stateを参照したいがEffectの再実行を抑えたいロジック、イベント処理等 |
よくある質問とその答え
React useEffectとは 使い方 に関して、特によく寄せられる疑問を取り上げ、その答えを整理します。実践で迷ったときの参考になるでしょう。
依存配列を省略したらどうなるか
依存配列を省略すると、useEffect の第一引数がレンダー後のたびに実行されます。毎回実行されるため大量の再描画で副作用が重複し、パフォーマンスが落ちたり予期しない動作になることがあります。副作用がレンダリング結果に直接関わるものでない限り、依存配列を明確に指定すべきです。
Empty dependency array[]の場合の実行タイミング
依存配列が空の場合、Effect は初回マウント時のみ実行され、依存値の変化による再実行はありません。アンマウント時にクリーンアップがあれば実行されます。これにより、初期化処理や一度きりにしたい処理を記述するのに適しています。
デバッグで useEffect が 2 回実行されるのはなぜか
Strict Mode が有効な開発環境では、副作用の安全性を確認するため、マウント直後に一度クリーンアップを行い再度マウントする振る舞いがあります。そのため useEffect のマウント時処理が一見 2 回実行されるように見えますが、本番コードではこの二重実行は起こりません。cleanup が正しく書かれていないとこの挙動で不具合が露呈します。
依存配列の中でオブジェクトや関数はどう扱うか
オブジェクトや関数はレンダリングごとに新しいインスタンスが生成されることが多いため、依存配列に含めるとほぼ常に変化と判定されてしまいます。このようなケースではオブジェクトを Effect 内で生成するか、useMemo や useCallback を使ってインスタンスを保持する方法があります。こうすることで意図しない再実行やループを回避できます。
まとめ
React useEffectとは、レンダリング以外の処理を安全に扱うための第一選択肢であり、副作用を制御する重要な手段です。依存配列の使い方、クリーンアップの実装、開発モードの挙動などを正しく理解することでバグを未然に防げます。さらに、useLayoutEffect や最新の useEffectEvent を使い分けることで、より柔軟で性能にも優れた設計が可能です。
使い方を習得しておくことで、React コンポーネントは読みやすく、保守性・可読性が高くなります。副作用が必要な場面では適切な構造を取り、副作用が不要な場面では無理に useEffect を使わず、フックの目的に沿った使い分けを心がけていきましょう。
コメント