【テクニカル・上級編】 Slotパターンの実装とPropsによるコンポーネント注入 – React実践ガイド

Slotパターンを極める：コンポーネントの疎結合化と「再レンダリングの深淵」への対処

やあ。Reactのコードベースが巨大化し、コンポーネントが「Propsの巨大な要塞」と化して身動きが取れなくなった経験はないだろうか？

多くのエンジニアが陥る罠は、`children`に依存しすぎることだ。単一の`children`では表現しきれない複雑なUIを実装するために、Propsにコンポーネントを直接渡す「Slotパターン」を採用する。これは非常に強力だが、同時にReactのレンダリングサイクルを理解していないと、パフォーマンスの爆弾を抱えることになる。

今日は、ただの「コンポーネントの渡し方」を超えて、アーキテクトが知るべき「メモリ効率とレンダリングの最適化」という視点からSlotパターンを解剖する。

—

1. なぜ「Propsとしてのコンポーネント注入」なのか

`children`は便利だが、UIの「特定の穴」にコンポーネントを埋め込むには柔軟性に欠ける。例えば、モーダルやカードの「ヘッダー用」「フッター用」「メインコンテンツ用」といった複数のスロットを制御したい場合、Propsとして`React.ReactNode`を明示的に受け取るのが最も堅牢だ。

TypeScriptを用いるなら、型定義はこうあるべきだ。

import React from ‘react’;

interface CardProps {
// コンポーネントの構造を明示するスロット
header?: React.ReactNode;
children: React.ReactNode;
footer?: React.ReactNode;
}

export const Card: React.FC = ({ header, children, footer }) => {
return (

);
};

ここで重要なのは、`React.ReactNode`を使うことだ。`React.ReactElement`に限定すると、文字列や数値、フラグメントが渡せなくなる。「何でも受け取れる柔軟性」を確保しつつ、実行時の条件分岐で無駄なDOM生成を抑えるのが、メモリ効率の良い実装の鉄則だ。

—

2. 「再レンダリングの連鎖」を断ち切る実装技術

ここからが本題だ。親コンポーネントで定義したコンポーネントをPropsとして渡す際、多くのエンジニアが犯すミスがある。

// 悪い例：インラインで関数を渡すと、親の再レンダリングごとにPropsが変わる
}
footer={ console.log(‘click’)} />}
>
コンテンツ

このコード、何が問題かわかるか？ `header`や`footer`に渡しているのは「コンポーネント」ではなく、「レンダリング済みのReact要素（オブジェクト）」だ。親が再レンダリングされるたびに、これらのオブジェクトは新しく生成される。`React.memo`で`Card`をラップしても、Propsの参照が変わるため、`Card`は毎回再レンダリングされてしまう。

アーキテクトの処方箋：コンポーネント関数の注入

もし、スロット側で動的にPropsを注入する必要があるなら、要素ではなく「コンポーネントそのもの（関数）」を渡すか、`useMemo`で参照を固定する必要がある。

// 良い例：参照を固定する
const headerContent = useMemo(() =>