Reactクイズ
ReactのRender Propsパターンの特徴として正しいものはどれですか?
解説
正解はrenderプロパティに関数を渡してレンダリングロジックを共有するです。Render Propsパターンは、Reactコンポーネントに関数をpropsとして渡し、その関数に表示内容を決めさせる設計パターンです。データ取得、マウス位置の追跡、フォーム処理などの共通ロジックを持つコンポーネントと、実際の表示を分離できます。たとえば、<DataProvider render={data => <UserList users={data} />} />のように記述します。DataProviderはデータ取得や状態管理を担当し、renderプロパティとして受け取った関数を呼び出します。呼び出し側は、受け取ったデータをどのコンポーネントでどのように表示するかを自由に決められます。なお、Render PropsはReactのAPI名ではなく、コンポーネント間でロジックを共有するためのパターンです。renderというprops名がよく使われますが、関数を受け取るpropsであれば名前は必ずしもrenderである必要はありません。現在のReactでは、同様のロジック共有はカスタムHookで実装されることも多いですが、既存コードを読む際や設計意図を理解するうえでRender Propsの知識は重要です。