forwardRef：親コンポーネントへのDOM ref公開

ref は、再レンダリングを引き起こさずにレンダー間で保持される、DOM ノードまたはコンポーネントインスタンスへの参照です。ref 属性を使って設定すると、React は DOM へのコミット後にその current プロパティを設定します。

ただし、div に設定するように関数コンポーネントへ ref を設定することはできません。ref は通常の props のように子へ渡されないため、デフォルトでは親から子コンポーネント内部の DOM ノードに到達する経路がありません。

React.forwardRef を使うと、コンポーネントは親から ref を受け取り、それを自身の要素の 1 つへ転送できます。コンポーネント関数をラップし、props と並んで ref が第 2 引数として渡されるように関数シグネチャを変更します。

これは内部の DOM ノードを呼び出し元のコンポーネントに公開するための公式のエスケープハッチです。通常は内部が見えない子コンポーネントでも、その要素を親から直接参照できるようになります。

ラップされた関数は 2 つのパラメーター、(props, ref) を受け取ります。1 つ目は通常の props オブジェクトで、2 つ目は転送された ref です。その ref を公開したい要素に設定します。たとえば、内部の input に ref={ref} と設定します。

この第 2 引数を受け取れるのは、forwardRef でラップされたコンポーネントだけです。ref を第 2 引数として指定した通常の関数コンポーネントには、undefined が渡されます。

典型的な例は、内部の input に親からフォーカスしたい再利用可能なテキストフィールドコンポーネントです。フィールドを forwardRef でラップし、転送された ref を基になる input 要素に設定すると、親から直接 focus を呼び出せます。

これにより、フィールドコンポーネントの再利用性を保ちながら、必要な箇所に限って制御された命令型の操作を許可できます。たとえば、フォームのマウント時に最初のフィールドへフォーカスできます。

転送された ref を使うと、要素の測定も可能になります。親は、forwardRef 経由で受け取った子要素に対して offsetWidth や offsetHeight を読み取ったり、getBoundingClientRect を呼び出したりできます。

これは、ツールチップ、ポップオーバー、レイアウト計算などで役立ちます。親が、要素をどこに配置するか決める前に、内部要素の正確な描画サイズや位置を把握する必要があるためです。

転送された ref は実際の DOM ノードを指すため、親からそのノードのネイティブ DOM メソッドを呼び出せます。転送されたリスト項目で scrollIntoView を呼び出すと、その項目を滑らかに表示領域へ移動できます。また、転送されたスクロールコンテナーで scrollTo を呼び出すと、そのコンテンツを再配置できます。

これらは宣言的な代替手段がない命令型の操作であり、まさに ref が扱うべき種類のインタラクションです。

公開したい要素が、複数のコンポーネントの深い階層に埋め込まれていることがあります。その場合は forwardRef を連鎖させ、各中間レイヤーで受け取った ref を次のレイヤーへ転送し、最終的に対象の DOM ノードへ到達させます。

連鎖内の各ラッパー自身が forwardRef を使って ref を渡す必要があります。途中に通常のコンポーネントがあると、接続が途切れてしまいます。

forwardRef と React.memo を組み合わせると、ref の転送とレンダーのメモ化を両立できます。通常の順序は memo(forwardRef(Component)) です。forwardRef の結果を memo でラップすることで、memo の比較が引き続き適用されます。

このパターンは、頻繁にレンダーされるコンポーネントが自身のノードを公開しながら、不要な再レンダリングを避ける必要がある、パフォーマンス重視のデザインシステムでよく使われます。

React DevTools では、forwardRef コンポーネントはコンポーネント名を包む ForwardRef ラベル付きで表示されます。これにより、コンポーネントが ref の転送に対応していることを一目で確認できます。

内部関数に名前を付けるか displayName を設定すると、一般的な匿名の ForwardRef ラベルよりも DevTools の項目を分かりやすくできます。

forwardRef は DOM ノードや命令型ハンドルを公開するためのものであり、データを渡すためのものではありません。親から子に影響を与える必要がある場合は、ref 経由で内部に立ち入るのではなく、通常の props と state を優先してください。

ref を使いすぎるとコンポーネント同士が強く結合し、React のデータフローを迂回するため、動作を追いにくくなります。宣言的な prop では本当に表現できないインタラクションの場合にだけ、forwardRef を使用してください。

forwardRef は、コンポーネントライブラリや再利用可能な入力コンポーネントで ref を公開するための標準的なツールであり続けています。新しい React のバージョンでは、ref を通常の prop として渡せる方向に進んでいますが、forwardRef は現在も広く使われており、理解しておくことが重要です。

forwardRef を十分に理解しておくと、既存のコードベースだけでなく、将来の ref-as-prop 構文が基盤とする内部の仕組みにも備えられます。

forwardRef コンポーネントが ref をどのように受け取るかについての理解を確認します。

forwardRef は、親から子コンポーネントの DOM ノードに到達できないという制限を解決します。コンポーネントに第 2 引数として ref を渡し、それを内部要素へ転送できるようにするためです。これにより、子要素へのフォーカス、測定、スクロールが可能になります。

memo と組み合わせたり、複数のレイヤーを通して連鎖させたりできます。また、DevTools では ForwardRef として表示されます。命令型の DOM 操作には使用しますが、データの受け渡しには使用しないでください。その用途には props のほうが適しています。