2 つのコンポーネントが同じ state を共有する必要がある場合、その state を最も近い共通の祖先まで移動(「リフトアップ」)し、props で下へ渡します。こうして単一の信頼できる情報源を作ります。
jsx
function Parent() {
const [query, setQuery] = useState("");
(
);
}
各子コンポーネントが自分自身の query を保持していたら、互いに同期がずれてしまいます。リフトアップすることで、入力と結果が常に一致します。
state を高く持ち上げすぎると、それを使わない多くの中間コンポーネントを通して props を渡さざるを得なくなります:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children として渡し、データをスレッド状に通すのではなく、使われる場所に留めます。指針となる原則:state は必要な高さまでだけ持ち上げる。それ以上は上げない。 持ち上げすぎると広範囲の再レンダリングとプロップドリリングを招き、持ち上げ不足だと同期のずれた重複を招きます。