【ITニュース解説】React's Component Revolution: How Closures Became the Foundation of Modern UI Components

Reactは現代のユーザーインターフェース（UI）開発において非常に人気のあるツールであり、その進化の根幹には「クロージャ」というJavaScriptの重要な概念が深く関わっている。Reactのフック（Hooks）が登場して以来、コンポーネントの作成方法が大きく変わり、その中心にクロージャが位置づけられるようになった。多くのReact開発者は日常的にクロージャを利用しているが、その重要性や仕組みを意識することは少ない。

かつてのReactでは、クラスベースのコンポーネントが主流だった。例えば、カウンターコンポーネントを作る場合、React.Componentを継承したクラスを定義し、constructor内でthis.stateを使って状態を管理していた。イベントハンドラとなるメソッドは、thisの参照を正しく保つためにthis.increment = this.increment.bind(this);のようにbindする必要があった。このようなクラスコンポーネントは、オブジェクト指向の考え方に基づいていたものの、状態の管理やライフサイクルメソッドの記述が分散し、複雑になりがちだった。

しかし、2019年初頭に正式リリースされたReactフックは、この状況を一変させた。関数コンポーネントの中でuseStateやuseEffectといったフックを使うことで、より簡潔で直感的なコードを書けるようになったのだ。上記のカウンターの例も、関数コンポーネントとuseStateを使うことで、bindの必要もなくなり、ずっとクリーンに記述できる。これは単にコードの書き方が変わったという表面的な変化だけでなく、Reactコンポーネントのアーキテクチャが根本的に、クラスベースからクロージャ中心のパターンへと移行したことを意味する。

ここで言う「クロージャベースのコンポーネントアーキテクチャ」とは、Reactの核となる仕組み、例えば仮想DOMの差分比較（diffing）、ファイバーアーキテクチャ、スケジューリングアルゴリズムといった部分は変わっていないことを前提としている。変化したのは、私たちがコンポーネントをどのように記述し、どのように考えるかという点だ。この新しいアーキテクチャでは、関数コンポーネントがJavaScriptのクロージャの仕組みを巧みに利用し、状態管理、副作用の処理、イベントハンドリングを行うようになった。コンポーネントの内部状態自体は、Reactのファイバーと呼ばれる内部構造に保存されている。しかし、各レンダー（再描画）の際に、その時点の最新の状態にアクセスできるようなクロージャが作成されるという仕組みだ。

すべての関数コンポーネントは、基本的に「クロージャファクトリー」と呼べる働きをする。Reactがコンポーネント関数を呼び出すたびに、その呼び出しごとに新しいクロージャが生成される。このクロージャは、その時点の実行スコープにある特定の変数を「捕捉」（キャプチャ）する。具体的には、useStateを通じてアクセスされる現在の状態値、コンポーネントに渡されるプロパティ、useContextから取得されるコンテキスト値、そしてその関数コンポーネントが定義されている外部スコープにあるあらゆる変数が捕捉の対象となる。例えば、ユーザープロファイルを表示するコンポーネントで、userIdプロパティ、user状態、themeコンテキストを使用する場合、useEffect内の非同期処理やイベントハンドラは、これらの変数をそれぞれその時の値で捕捉したクロージャとなる。コンポーネントが再レンダーされるたびに、これらの変数には新しい値が設定され、それらを捕捉する新しいクロージャが生成される。

useEffectフックは、このクロージャアーキテクチャを最も明確に示す例だ。useEffectのコールバック関数は、その効果が最初に実行された時点のコンポーネントの状態やプロパティを捕捉したクロージャとなる。例えば、setIntervalを使って1秒ごとにカウントアップするタイマーを実装する際、useEffectの依存配列を空にしてしまうと、その効果はコンポーネントがマウントされた時に一度しか実行されない。この時作成されたクロージャは、最初に捕捉したcountの値をずっと参照し続けるため、setCount(count + 1)と記述しても、countは常に最初の値（例えば0）のまま更新されてしまい、正しくカウントアップされないという問題が発生する。これは「古いクロージャ」（stale closure）と呼ばれる古典的な罠である。この問題を解決するには、countをuseEffectの依存配列に含めることで、countが変化するたびに新しいクロージャを生成させるか、setCount(prev => prev + 1)のように更新関数を利用して、直前の状態値に基づいて新しい状態を計算させる方法がある。後者の方法であれば、クロージャがcountに依存する必要がなくなるため、依存配列を空にしても正しく動作する。

Reactのクロージャを多用するアーキテクチャは、ユニークなメモリ管理上の課題も生み出す。コンポーネントがアンマウントされる際に、適切な「クリーンアップ」を行わないと、メモリリークの原因となることがある。クロージャ自体は、他のオブジェクトと同様に参照がなくなればガベージコレクション（不要なメモリ領域を自動的に解放する仕組み）によって回収される。しかし、問題は、外部のシステム、例えばタイマー、イベントリスナー、あるいはデータ購読などが、古いレンダーサイクルで作成されたクロージャへの参照を持ち続けてしまう場合に発生する。例えば、データ購読を行うコンポーネントで、useEffect内でapi.subscribeを使って購読し、コールバック関数でsetDataを呼び出すとする。このコールバック関数は、そのレンダー時のsetDataを捕捉したクロージャである。もしuseEffectのクリーンアップ関数でsubscription.unsubscribe()を呼び出さなければ、購読オブジェクトはコールバッククロージャへの参照を持ち続け、結果としてそのクロージャが参照するsetDataや、それに関連するコンポーネネントのインスタンスが、コンポーネントがアンマウントされてもメモリに残り続けてしまう。クリーンアップ関数は、このような外部からの参照を解除し、メモリリークを防ぐ上で極めて重要だ。

このようなメモリリークの多くは、React自体ではなく、useEffect内でのクリーンアップ忘れが原因で発生する。小さなコンポーネントでは目立たないかもしれないが、ライブダッシュボードやチャットアプリのような大規模なアプリケーションでは、メモリリークが積み重なり、ブラウザの動作が遅くなったり、メモリを大量に消費したりする原因となる。クロージャが何かに参照され続ける限りメモリ上に存在し続けるという性質を理解すれば、クリーンアップ関数の重要性がはっきりとわかるだろう。

Reactには、クロージャのライフサイクルを効率的に管理し、パフォーマンスを最適化するための「メモ化（Memoization）」フックも用意されている。useMemo、useCallback、React.memoがそれに当たる。これらは「必要がない限り新しいクロージャを作成するな」というReactからのメッセージと捉えることができる。例えば、useMemoを使うことで、依存配列に指定した値が変更されない限り、重い計算の結果や、複雑なオブジェクトの生成を再実行することなく、以前の結果を再利用できる。同様に、useCallbackは、イベントハンドラなどの関数（クロージャ）をメモ化し、依存配列が変更されない限り、その関数自体が再生成されるのを防ぐ。これにより、子コンポーネントへの不要な再レンダーを防ぎ、アプリケーション全体のパフォーマンス向上に貢献する。開発モードやStrict Modeでは、意図しない副作用を検出するためにReactが二重にコンポーネントを呼び出し、メモ化された値を再生成することがあるが、これは本番環境での挙動とは異なるデバッグ目的の動作である。

Reactのクロージャベースのアプローチは、フロントエンド開発の風景全体に大きな影響を与えた。例えば、Vue 3で導入されたComposition APIは、Reactのフックパターンに似た構造を持つ。Svelte 5の「runes」も、Reactフックと同様の働きをする。さらに、JavaScriptの枠を超え、SwiftUIやKotlinのComposeといった他の宣言的UIフレームワークにも、Reactの概念が色濃く反映されている。

このように、Reactコンポーネントをクロージャの視点から理解することは、UI構築に対する新しい思考モデルを私たちにもたらす。コンポーネントはもはや単なるオブジェクトではなく、「クロージャファクトリー」であると捉えることができる。コンポーネントの状態はクロージャを通じてアクセスされるが、実際のデータはReactの内部にあるファイバー構造に保存されている。再レンダーが発生するたびに、新しいクロージャが生成され、その時点の最新の状態やプロパティが捕捉される。そして、コンポーネントのパフォーマンスを最適化するということは、クロージャのライフサイクルをいかに効率的に管理するかにかかっている。

この「クロージャのレンズ」を通してReactを見ると、依存配列の意味、古いクロージャによるバグの発生メカニズム、そしてメモ化戦略の重要性といった、これまで漠然としていた多くの概念が明確になるだろう。Reactがフックを導入したことは、クロージャが現代のコンポーネントアーキテクチャの強力な基盤となり得ることを示した革新的な出来事であった。私たちが書くすべての関数コンポーネントは、JavaScriptのクロージャの振る舞いを活用しながら、Reactのコアエンジンがその裏で仮想DOMの調停、スケジューリング、そして実際の描画処理を担っている。次回useStateを記述するときは、単に状態を管理しているだけでなく、ユーザーインターフェースの構築方法を変えた、この洗練されたクロージャベースのアーキテクチャの一部を形成していることを思い出してほしい。