React Academy · レッスン

Prop Drilling：問題になる場合と問題にならない場合

Q: 「Prop Drilling：問題になる場合と問題にならない場合」で何を学びますか？

深い受け渡しの連鎖を見つけ、単なる冗長さと本当の複雑さを見分けます ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

深い受け渡しの連鎖を見つけ、単なる冗長さと本当の複雑さを見分けます

「Prop Drilling：問題になる場合と問題にならない場合」はCoddyKit上の無料React Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、propsのバケツリレーを特定し、それが実際の問題を引き起こす場合を理解するとともに、propsを渡すことが正しく簡単な解決策となる状況との違いを見分けます。

Propsのバケツリレーとは

Propsのバケツリレーとは、それ自体ではpropsを使わず、その子コンポーネントだけが必要とするpropsを、中間コンポーネントを経由して渡すことです。各中間層は、そのpropsを受け取り、さらに渡さなければなりません。

// Middle component: receives 'user' only to pass it down
function Layout({ user }) {
  return <Sidebar user={user} />;
}
// Sidebar: receives 'user' only to pass it down
function Sidebar({ user }) {
  return <UserAvatar user={user} />;
}
// UserAvatar: actually uses 'user'
function UserAvatar({ user }) {
  return <img src={user.avatarUrl} />;
}

バケツリレーで問題ない場合

1～2階層のバケツリレーは、多くの場合まったく問題なく、最も簡単な解決策です。浅い階層でpropsを1つ追加するコストよりも、Contextや状態管理ライブラリを導入するコストのほうが高くなります。

バケツリレーが問題になった兆候

次のような場合、バケツリレーは問題になります：(1) propsが、それを使わない4階層以上のコンポーネントを通過している、(2) propsの名前変更に多くのファイルの変更が必要になる、(3) 実際にデータを受け取って使うコンポーネントが分かりにくい。

コンポーネント合成によるリファクタリング

Contextを導入する前に、**コンポーネント合成**を試してみてください。生のデータではなく、完全にレンダリング済みの利用側コンポーネントをprops（またはchildren）として渡します。中間層はデータについて知る必要がありません。

// Instead of drilling 'user' through Layout → Sidebar → UserAvatar,
// render UserAvatar at the top level and pass it as a slot:
function App() {
  return <Layout sidebar={<UserAvatar user={user} />} />;
}

コンポーネント合成で結合を減らす

コンポーネント合成とは、データを所有する親コンポーネントが、利用側コンポーネントも直接レンダリングすることです。中間のレイアウトコンポーネントは完成済みのJSXを受け取るため、データから完全に切り離されます。

Contextを使う場合

次のような場合はContextを使います：(1) 複雑なJSXを多数の階層にわたって渡す必要があるため、コンポーネント合成では対応しにくい、(2) ツリー内の互いに無関係な多くのコンポーネントが同じデータ（例：現在のユーザー、テーマ、ロケール）を必要とする。

状態管理ライブラリを使う場合

状態が複雑で頻繁に更新される場合、開発者ツールが必要な場合、または完全に分離されたコンポーネントツリー間で共有する必要がある場合は、Zustand、Reduxなどを使います。

逆方向のデータフロー

Propsのバケツリレーはコールバックにも当てはまります。`onChange`ハンドラーを5階層下まで渡すことは、データを渡すのと同じくらい大変です。コールバックにも、同じコンポーネント合成とContextの戦略を適用してください。

判断の流れ

次のように考えます：階層はいくつありますか？1～2階層なら、そのままpropsを渡します。3階層以上なら、まずコンポーネント合成を試します。それでも複雑ならContextを使います。更新ロジックが複雑、またはツリーをまたぐ場合は、状態管理ライブラリを使います。

確認問題

Propsのバケツリレーを解決するために、Contextを導入する前に試すべき解決策はどれですか？

まとめ

Propsのバケツリレーは1～2階層なら問題ありません。3階層を超える場合は、まずコンポーネント合成を試します。同じデータを多くのコンポーネントが使う場合はContextを使います。複雑な状態やツリーをまたぐ状態には、状態管理ライブラリを使います。

次のレッスン：**兄弟コンポーネント間の通信パターン** — 共通の親の状態とコールバックpropsを使って、2つの兄弟コンポーネントを連携させます。

よくある質問