What does 'lifting state up' mean and when should you do it?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Moving shared state to the closest common ancestor of components that need it, then passing it down via props. Do it whenever two or more components must stay in sync with the same data.
Detailed explanation
React's one-way data flow means siblings can't share state directly. If a search input and results list live in different subtrees but depend on the same query string, that query belongs to their nearest shared parent: the parent owns useState, passes the value and setter down. The children become 'controlled' by the parent — presentational and reusable. Signs you should lift: duplicated copies of the same value drifting out of sync, or a child needing to change something a sibling displays. Counter-pressure matters too: over-lifting bloats parents and causes wide re-render cascades, so colocate state as low as possible until sharing is genuinely needed. For deeply nested or widely shared data, Context or external stores (Redux/Zustand/React Query) replace prop-threading through many layers ('prop drilling').
Official docs:React docs: Sharing State Between Components
Example
function SearchPage() {
const [query, setQuery] = useState(''); // lifted here
return (
<>
<SearchBox query={query} onQueryChange={setQuery} />
<ResultsList query={query} />
</>
);
}Interview tip
State the principle — 'own state at the lowest common ancestor, no lower, no higher' — and mention prop drilling as the natural follow-up topic.
Common mistakes
- Lifting everything to the top-level app 'just in case'.
- Duplicating synced state instead of lifting.