Когда два компонента должны совместно использовать одно и то же состояние, вы перемещаете ("поднимаете") это состояние к их ближайшему общему предку и передаёте его вниз через props, чтобы было единственное источник истины.
() {
[query, setQuery] = ();
(
);
}
Если бы каждый child хранил свой собственный query, они бы вышли из синхронизации. Поднятие его означает, что input и результаты всегда согласованы.
Поднятие state высоко может заставить вас передавать props через множество промежуточных компонентов, которые их не используют:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children, чтобы данные оставались там, где они используются, вместо того чтобы передаваться через промежуточные компоненты.Руководящий принцип: поднимайте состояние только настолько высоко, насколько это необходимо — не выше. Чрезмерное поднятие вызывает широкие re-renders и prop drilling; недостаточное поднятие вызывает рассинхронизированные дубликаты.