プロップドリリングとは何か、またそれを回避する方法は？

Question

Accepted Answer

**プロップドリリング** は、データを多くの中間コンポーネントを通して渡すことであり、それらのコンポーネント自体はそのデータを使用しない場合です。これは単に深くネストされたコンポーネントがデータを必要とするため行われます。これは退屈であり、コンポーネントを気にしないデータに厳密に結合させます。 ## 問題 ```jsx // `user` is only needed by Avatar, but must pass through every layer function App() { const [user] = useState({ name: "Ann" }); return ; // App → Layout } function Layout({ user }) { return

; // Layout → Header (doesn't use it) } function Header({ user }) { return

; // Header → Nav (doesn't use it) } function Nav({ user }) { return ; // FINALLY used here } ``` `Layout`、`Header`、`Nav` はすべて `user` を受け入れて転送する必要があります。たとえそれらが使用しなくても — ノイズが多く、壊れやすく（プロップの名前を変更して各層を編集する）、無関係なコンポーネントを結合します。 ## ソリューション1: Context（組み込み） ```jsx const UserContext = createContext(null); function App() { const [user] = useState({ name: "Ann" }); return ( {/* provide once at the top */} {/* no user prop needed anywhere */} ); } function Avatar() { const user = useContext(UserContext); // consume directly, skip the middle return {user.name}

; } ``` Context により、任意の子孫は値を直接読み取ることができ、中間層をバイパスします。 ## ソリューション2以上 ```text ✓ Context API → for app-wide/subtree data (theme, user, locale) ✓ State libraries → Zustand/Redux/Jotai — components subscribe to the store directly ✓ Component composition → pass JSX as children instead of data through props ``` ```jsx // composition: let the parent compose the tree, passing the leaf directly ``` ## 過度に修正しないこと ```text A little prop drilling (1–2 levels) is FINE and often clearer than adding Context. Reach for Context/stores when drilling becomes deep or widespread. ``` ## なぜ重要なのかプロップドリリングはデータが広く必要であることを示す一般的な問題です — それを認識することで、Context、state ライブラリ、または composition に頼るべき時がわかります。それを回避する（本当に深い場合）は、コンポーネントを疎結合で保ちやすくします。しかし、判断が重要です：浅いドリリングは許容でき、時期尚早な抽象化よりシンプルです。目標は「すべての prop 渡し」ではなく、「深く繰り返される転送」を排除することです。