Reactのfunction componentで副作用を扱うhooksであるuseEffectは、stateやpropsの変化に応じて非同期処理や外部APIとの連携、イベントの登録・解除などを行う重要な役割を担います。正しく使わないと無限ループやメモリリーク、不要な再レンダリングなどのトラブルに繋がります。本記事ではReact useEffectとは 使い方というキーワードを軸に、初心者から中級者まで迷いやすいポイントを含めて、最新情報を元に丁寧に整理していきます。
目次
React useEffectとは 使い方を基本から理解する
React useEffectとは、function componentが描画された後や更新された後に副作用（side effect）を実行するためのhookです。使い方としては、第一引数に副作用を実行する関数を渡し、必要に応じてクリーンアップ関数を返します。第二引数には依存関係の配列を渡し、どの値が変化したら副作用を再実行するかを指定します。
React useEffectとは 使い方を理解することで、API呼び出し、購読、DOM操作などの処理をコンポーネントのライフサイクルに沿って安全に実装できます。最新のReact仕様では依存関係の指定が厳格になっており、依存値の不足・過剰が警告されるようになっています。
useEffectの基本構文
useEffectはReactからimportして使用します。構文は次の通りです：function componentの中で、useEffect(副作用関数, 依存配列)。副作用関数内では非同期処理や外部API呼び出し、購読の設定を行い、必要であればreturnでクリーンアップ関数を返します。クリーンアップ関数はコンポーネントのアンマウント時や依存値変化時に実行されます。
例：useEffect(() => { fetchデータ(); return () => { cleanup処理 }; }, [propA, stateB]);のように書くことで、propAあるいはstateBが変わった時に副作用が再実行されます。
依存配列（dependencies array）の意味とパターン
依存配列は第二引数で渡すオプションで、中に含まれる値（props、state、関数など）が変化した時にuseEffect内の処理が再実行されます。主なパターンは三つあり、それぞれ使い所があります。
依存配列なし：副作用関数は毎回レンダリング毎に実行されてしまいます。依存配列空配列[]：コンポーネントの初回マウント時だけ実行。特定の値を指定した配列：[a, b]など。初回実行後、aまたはbが変化した時だけ再実行されます。
cleanup関数の役割と書き方
副作用が使い終わったり、コンポーネントがアンマウントされたりする際に後始末を行うcleanup関数は非常に重要です。例えばイベントリスナーの登録解除、タイマーのクリア、サブスクリプションの解約などが含まれます。これを忘れるとメモリリークや予期せぬ挙動の原因になります。
cleanup関数はuseEffectの副作用関数からreturnする形式で書きます。依存関係が変化するたびに前のeffectのcleanupが呼ばれ、その後新しいeffectが実行される構図になっています。
React useEffectとは 使い方でよくある迷いやすいポイント
React useEffectとは 使い方を学んだ後は、よくある落とし穴や間違えやすいパターンを押さえることが重要です。ここでは依存関係の誤設定、非同期処理の扱い、再実行の過多、不要な副作用の誤用など、実務で遭遇しやすい問題点とその対策を紹介します。
依存関係の指定忘れと過剰指定
副作用内で参照しているprops・stateを依存配列に含め忘れると、古い値の状態で処理が続き、想定外の動作が発生します。逆に、不要な値を含め過ぎると頻繁な再実行でパフォーマンスが低下する恐れがあります。最新のReactではeslintのexhaustive-depsルールがこれらを警告してくれるよう設計されています。
例えばstateAを使って副作用処理をするなら、依存配列にstateAを含める必要があります。もし関数やオブジェクトを依存値として使うなら、useCallbackやuseMemoを使って安定化させることで不必要な再レンダーを防ぎます。
非同期処理とアンマウント時の状態更新問題
副作用内で非同期処理（API fetchやsetTimeoutなど）を行うと、処理が完了する前にコンポーネントがアンマウントされるケースがあります。その際、アンマウント後にstate更新を行うと警告が出たりクラッシュしたりすることがあります。これを防ぐには、キャンセルフラグやAbortControllerなどを使って対応します。
例えばlet isMounted = trueとし、クリーンアップ時にfalseにする実装方法があります。fetch処理完了時にisMountedをチェックしてからstate更新するようにすると安全です。
レンダー毎の再実行と無限ループの防ぎ方
依存配列無しの場合や、依存値が毎回新しいオブジェクトや関数である場合、useEffectが毎レンダーで再実行され、無限ループを招くことがあります。例えば、関数をコンポーネント内で毎回定義して依存配列に含めてしまうとeffectは再実行し続けます。これを避けるにはuseCallbackやuseMemoの利用、関数やオブジェクトをeffect外に移動させることが有効です。
また、依存配列が空でも開発モードでStrict Modeが有効な場合はsetup→cleanup→setupという実行サイクルが入るため、その挙動を理解しておく必要があります。
React useEffectとは 使い方を応用でマスターするパターン
基本が押さえられたら応用パターンに挑戦して、より実用的な使い方を身につけましょう。ここではカスタムHookを使う方法、複数のuseEffectを使い分ける方法、条件付きで副作用を制御する方法などを解説します。
カスタムHookを作成して共通処理をまとめる
複数コンポーネントで同じ副作用が必要な場合は、カスタムHookを作ることで可読性と再利用性が向上します。例えばデータの取得＋loading/error管理のロジックをuseFetchというHookに分けることで、コンポーネント側は取得部分を意識せずUIロジックだけに集中できます。
カスタムHook内でuseEffectを使う際も依存関係の指定やcleanup処理は正しく行い、Hooks規則を守ることが重要です。こうすることで保守性とテストしやすさが改善されます。
useEffectを複数書くときの整理方法
副作用の種類が異なる処理をまとめて一つのuseEffectに書くと読みづらく・バグを誘発することがあります。例えばAPI取得、イベント登録、DOM操作などはそれぞれ独立したuseEffectを使った方が責任範囲が明確になります。再レンダーや依存の見直しも容易です。
複数のuseEffectを使う際には依存配列ごとに処理を分けることで、不要な副作用再実行やcleanupの複雑性を軽減できます。
条件付き副作用の制御（Prop/Stateによる実行制御）
副作用を特定の条件下でのみ実行したい時があります。たとえばpropsやstateの値によって副作用を制御するケースです。その場合、useEffectの中でif条件を使うことで制御できますが、依存配列に必要な値を含めることを忘れてはいけません。
他にはフラグをstateで持ち、副作用関数と条件分岐・cleanupを組み合わせる方法があります。それにより、特定のレンダー時にはeffectをスキップしたり、アンマウント前にのみcleanupが実行されたりするようにできます。
React useEffectとは 使い方を実践で役立てる例
実践的な例を通してReact useEffectとは 使い方を確認すると理解が深まります。ここではデータ取得・入力補助・パフォーマンス改善など現場でよくあるユースケースを挙げ、それぞれのポイントを整理します。
APIからデータを取得する例
あるコンポーネントがマウント時に外部APIからデータを取得し、取得中・成功・失敗の状態を表示するパターンを考えます。useEffect内でfetchなどの非同期処理を行い、途中でアンマウントする可能性があるためキャンセルフラグを使用します。依存配列にはAPIクエリなど、変化があれば再取得したい値を含めます。
例：useEffect(() => { let isMounted = true; async function fetchData(){ try{ const data = await fetch(…); if(isMounted){ setState(data); } }catch(e){ if(isMounted){ setError(e); } } } fetchData(); return () => { isMounted = false; }; }, [queryParam]);という形が安全です。
入力補助（入力フィールドのフォーカスなど）
例えば、ある入力欄が表示された際に自動でフォーカスを当てたい場合、useEffectを使ってrefを取得しfocusメソッドを呼び出すことができます。依存配列を空にすることで、最初の描画時のみフォーカスが実行されます。
動的な条件でフォーカスを当てたいなら、stateやpropsを依存配列に指定することで、その条件が変化したときにも再度フォーカスがかかるように制御できます。
パフォーマンス改善のための最適化パターン
useEffectと併用することでパフォーマンスを改善できるテクニックとして、不要な再レンダーを避けること、重い処理を遅延実行することなどがあります。依存値を極力限る、関数／オブジェクトの生成をuseCallback／useMemoでメモ化する、また非同期処理に遅延を持たせてスロットリングやデバウンスする方法があります。
また、Strict Mode下での挙動にも注意し、特に初回マウントでsetup→cleanup→setupが入る仕様を念頭において、クリーンアップ処理を正しく実装することが大切です。
React useEffectとは 使い方と他のHooksとの比較
useEffectは便利ですが、似たような挙動を持つHooksとの違いを理解することで適切な場面で使い分けできます。他のHooksとの比較を通じてReact useEffectとは 使い方を誤らないように整理しておきます。
useEffect と useLayoutEffect の使い分け
useLayoutEffectはDOMの変更後、画面に描画される前に実行される副作用を扱うときに使われます。たとえばDOMのレイアウトや描画サイズの調整など、表示に影響を及ぼす副作用がある場合に適しています。通常のuseEffectはブラウザがペイントを済ませた後に実行されるので、描画が遅れたりちらついたりするケースが少ない場合はこちらを使う方が無難です。
しかし、useLayoutEffectは同期的に実行されるため、パフォーマンスへの影響が大きくなる可能性があります。したがって、DOMへのレイアウト操作など画面描画前に整えたい処理だけをuseLayoutEffectに任せ、その他の非同期処理やイベント登録などは通常のuseEffectを使う方が効率的です。
useEffect と class component のライフサイクルメソッド比較
class componentではcomponentDidMount, componentDidUpdate, componentWillUnmountなどのライフサイクルメソッドを使って同様の副作用処理を行っていました。useEffectはこれらすべてを統合する形で同時に扱うことができ、複雑な分岐を使わずに一貫性を持って書けるようになります。
例えばcomponentDidMountと同じタイミングで副作用を実行したい場合は依存配列を空にする、componentDidUpdateのように特定のpropsやstate変化に応じる場合は依存値を設定する、componentWillUnmountと同様にcleanup関数で後処理を行う、という形でclass時代の知識を応用できます。
他のhookとの連携（useMemo / useCallbackなど）
useEffectと共にuseMemoおよびuseCallbackを使うことで依存値として関数・オブジェクトを扱う際の安定化が可能です。これらを使わないと、副作用の依存配列に毎レンダー新しくなる関数やオブジェクトが含まれてしまい、useEffectが意図せず頻繁に再実行されてしまいます。
useMemoは値やオブジェクトをキャッシュし、useCallbackは関数をキャッシュします。これを併用することで依存配列が実質安定し、パフォーマンスの観点で改善が期待できます。
React useEffectとは 使い方の最新仕様と変更点
Reactは時間と共にHooksの挙動やlintルールが更新されており、React useEffectとは 使い方にもいくつかの最新仕様や注意点があります。ここでは最近追加または明確化された仕様を取り上げ、より堅牢な書き方のために知っておくべきことを整理します。
Strict Modeでの初回マウント時の二重実行
ReactのStrict Modeでは、開発時ビルドでコンポーネントの初期マウント時に副作用のセットアップ→クリーンアップ→再セットアップが自動で走る挙動があります。これにより副作用のcleanup構造が正しいか確認できるようになっています。副作用の中で副作用を前提とする処理を書いていると、想定外の再実行が見えることがありますが、本番ビルドではこの二重実行は行われません。
これを踏まえ、初回マウント用の処理を書く際にもcleanup含めた書き方が正しく機能するように設計しておく必要があります。副作用内で外部との接続やサブスクリプションを登録したら必ず解放するロジックを含めることが望まれます。
Reactのeslint-plugin-react-hooksと exhaustive-deps ルール
React環境では副作用の依存関係が正しく書かれているかをチェックするeslintのルールが提供されており、useEffectを含むHooks全般で欠落した依存値の警告を出します。これによって古くなったstateやpropsを参照し続ける副作用のバグを未然に防ぐことができます。
依存関係に不必要なものが含まれているかどうかも警告対象であり、冗長な依存を減らすことで再レンダリング回数を抑える工夫を促します。必要であればコードをリファクタリングして関数をuseCallbackで包む、オブジェクトをuseMemoで保持するなどが有効です。
useEffectEventの導入と依存値読み取りの制御
標準的なuseEffectとは別に、最新仕様ではuseEffectEventという仕組みが提供され、特定のケースで副作用から最新のstateやpropsを読み取りたいが、再実行を依存の変化によって制御したいケースで利用できます。副作用機能をイベントとして切り離すことで、依存配列に含めるべき値を限定しながら最新値を読み取ることが可能になります。
この機能は副作用が重くない処理やログ取得、イベントトラッキングなどで有用です。副作用が複雑な依存値を持つときに全ての依存を列挙する代わりに、イベントという形で管理することでコードの見通しが良くなります。
まとめ
React useEffectとは 使い方を理解するためには、基本構文、依存配列、cleanupの役割をまず押さえることが肝要です。これらがきちんと設計されていないと、無限ループやメモリリーク、古いデータ参照などのバグの温床になります。
さらに依存関係の指定漏れ・過剰指定、非同期処理のアンマウント対応、Strict Modeでの二重実行などの最新の注意点も認識しておくべきです。必要なケースにはuseLayoutEffectやカスタムHookなどを組み合わせて適切な処理に分けることで可読性と安定性が向上します。
Reactで副作用を扱う際は、useEffectの使い方を丁寧に学び、迷いやすいポイントを理解した上で実践すると、自信を持って機能を実装できます。これによりReactアプリケーションの品質と性능を両立できる実装が可能になります。
コメント