「state のリフトアップ」とは何を意味し、プロップドリリングとどう関係しますか？

Question

Accepted Answer

**2 つのコンポーネントが同じ state を共有する必要がある**場合、その state を最も近い共通の祖先まで移動（「リフトアップ」）し、props で下へ渡します。こうして単一の信頼できる情報源を作ります。 ```jsx function Parent() { const [query, setQuery] = useState(""); // state lives in the common parent return ( <> {/* both children share the SAME state */} ); } ``` 各子コンポーネントが自分自身の `query` を保持していたら、互いに同期がずれてしまいます。リフトアップすることで、入力と結果が常に一致します。 ## 欠点：プロップドリリング state を高く持ち上げすぎると、それを使わない多くの中間コンポーネントを通して props を渡さざるを得なくなります： ```jsx {/* just forwarding */} {/* just forwarding */} {/* finally used here */} ``` ## どう緩和するか - **コンポジション**：JSX を `children` として渡し、データをスレッド状に通すのではなく、使われる場所に留めます。 - 真にグローバルなデータには **Context**（テーマ、現在のユーザー）。 - 大きな共有状態には**状態ライブラリ**（Zustand/Redux）。指針となる原則：**state は必要な高さまでだけ持ち上げる。それ以上は上げない。** 持ち上げすぎると広範囲の再レンダリングとプロップドリリングを招き、持ち上げ不足だと同期のずれた重複を招きます。