When two components need to share the same state, you move ("lift") that state up to their closest common ancestor and pass it down via props, so there is a single source of truth.
jsx
() {
[query, setQuery] = ();
(
);
}
When two components need to share the same state, you move ("lift") that state up to their closest common ancestor and pass it down via props, so there is a single source of truth.
() {
[query, setQuery] = ();
(
);
}
A library of IT interview questions with detailed answers — from Junior to Senior.
DonateIf each child kept its own query, they'd get out of sync. Lifting it means the input and the results always agree.
Lifting state high can force you to pass props through many intermediate components that don't use them:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children so the data stays where it's used instead of being threaded through.The guiding principle: lift state only as high as it needs to go — not higher. Over-lifting causes wide re-renders and prop drilling; under-lifting causes out-of-sync duplicates.