【ITニュース解説】useEffect() detail explanation

useEffectは、Reactアプリケーションにおいて、画面の表示内容とは異なる、特別な処理を実行するための機能である。これは、いわゆる「副作用」と呼ばれる処理、例えばサーバーからのデータ取得、タイマーの設定、イベントリスナーの登録、あるいはブラウザのタイトル更新など、コンポーネントの外部に影響を与える操作を行うために使われる。

useEffectの基本的な役割は、コンポーネントが画面に表示された後（レンダリング後）に特定のコードを実行することにある。さらに、この関数は「クリーンアップ関数」と呼ばれる特別な関数を返すことができる。このクリーンアップ関数は、useEffectで実行した副作用の後始末をするために使われる。例えば、設定したタイマーを停止したり、登録したイベントリスナーを解除したりすることで、不要な処理が残り続けたり、メモリリークという問題が発生したりするのを防ぐ。Reactは、このクリーンアップ関数が次の副作用が実行される前、そしてコンポーネントが画面から削除される（アンマウントされる）前に必ず実行されることを保証する。

useEffectがいつ実行されるかを制御するために、「依存関係配列」という仕組みがある。これはuseEffectの第二引数に渡す配列で、どのような値がその配列に含まれるかによって、副作用の実行タイミングが変わる。 もしこの配列が空（[]）の場合、useEffectはコンポーネントが初めて画面に表示されたとき（マウント時）に一度だけ実行され、その後、コンポーネントが画面から削除されるとき（アンマウント時）にクリーンアップ関数が一度だけ実行される。これは、一度だけ設定すればよい初期設定や、初回のみデータを取得したい場合などに便利だ。 もし配列の中に特定の変数（例えば[dep]のように）が含まれている場合、useEffectはその変数の値が前回のレンダリングから変更されたときに再度実行される。このとき、新しい副作用が実行される前に、前回の副作用に対するクリーンアップがまず実行される。 もしこの依存関係配列を完全に省略した場合、useEffectはコンポーネントがレンダリングされるたびに毎回実行される。これは頻繁な処理につながるため、通常は特定の条件で実行したい場合を除き、避けるべきパターンと言える。

クリーンアップ機能の重要性は大きい。例えば、ウェブページ上で一定時間ごとに何かを表示するタイマーを設定したとする。もしこのタイマーを解除せずにページを移動したり、コンポーネントが削除されたりすると、見えない場所でタイマーが動き続け、不必要な処理がバックグラウンドで実行され続ける可能性がある。これをメモリリークと呼び、アプリケーションの動作を重くしたり、予期せぬエラーを引き起こしたりする原因となる。クリーンアップ関数は、このようなタイマーの削除、ネットワークからデータを取得中のリクエストの中止、イベントリスナーの購読解除といった、リソースを解放する役割を担う。Reactは、新しい副作用が実行される前に必ず前回のクリーンアップを実行するため、これらのリークを効果的に防ぐことができる。

useEffect内で非同期処理、例えばサーバーからデータを取得する処理を行いたい場合がある。しかし、useEffectに直接渡す関数自体をasyncとマークすることはできない。これは、async関数が必ずPromiseを返すため、useEffectが期待するクリーンアップ関数と混同されることを防ぐためだ。代わりに、useEffectの内部で別の非同期関数を定義し、それをすぐに呼び出すという方法を使う。 非同期処理では、競合状態（Race Condition）という問題に注意が必要だ。これは、複数の非同期処理が同時に開始され、それらが完了する順番が不定であるために、意図しない結果になってしまう状況を指す。例えば、検索ボックスに「c」と入力したときに検索リクエストを送り、その直後に「ca」と入力して別の検索リクエストを送ったとする。もし「ca」に対するリクエストよりも「c」に対するリクエストの方が完了が遅い場合、古い「c」の結果が画面に表示されてしまう可能性がある。これを防ぐためには、「キャンセルフラグ」や「AbortController」といった仕組みを使って、古いリクエストの結果を無効化する処理を組み込む必要がある。これにより、常に最新のリクエストの結果だけが反映されるように制御できる。

useEffectの動作をより深く理解するためには、その実行タイムラインを想像すると良い。 例えば、コンポーネントが初めてレンダリングされたとき、最初のuseEffectが実行される。これが「エフェクト #1」となる。 次に、依存関係配列に含まれる値が変更され、コンポーネントが再レンダリングされるとする。このとき、Reactはまず「エフェクト #1」から返されたクリーンアップ関数を実行する。これにより、前回の副作用が適切に終了される。その後に、新しい「エフェクト #2」が実行される。 そして、最終的にコンポーネントが画面から取り除かれるときには、最後に実行されたエフェクト（この例では「エフェクト #2」）から返されたクリーンアップ関数が実行される。

具体的な例として、ユーザーが検索ボックスに文字を入力するたびにサーバーにデータを問い合わせるケースを考えてみよう。 まず、ユーザーが「c」と入力すると、コンポーネントがレンダリングされ、useEffectが実行される。このとき、キャンセル用のフラグがfalseに設定され、api?q=cというデータ取得リクエストが開始される。この時点では、クリーンアップ関数はまだ実行されない。 次に、ユーザーがすぐに「ca」と入力すると、検索語が変わったためコンポーネントが再レンダリングされる。このとき、Reactは新しいuseEffectを実行する前に、まず前回のuseEffect（「c」のときのもの）のクリーンアップ関数を実行する。このクリーンアップ関数が、古いリクエストのキャンセル用フラグをtrueに設定する。これにより、たとえ古い「c」のリクエストが後で完了しても、その結果は無視されるようになる。その後、新しいuseEffectが実行され、新しいキャンセル用フラグがfalseに設定され、api?q=caというデータ取得リクエストが開始される。 結果として、たとえ古いリクエストが遅れて完了しても、その結果が画面を更新することはない。なぜなら、そのリクエストはすでにキャンセルフラグによって無効化されているためだ。最新のリクエストのみが画面の状態を更新することを許可される。この仕組みにより、ユーザーには常に最新の検索結果のみが表示され、古いデータが誤って表示されることがなくなる。useEffectは、このようにしてアプリケーションの振る舞いを予測可能にし、安定性を保つための強力なツールなのだ。