Lifting state moves shared data to the closest common ancestor. Composition often beats deep prop chains and bloated context.
Common Interview Questions
Q: When lift state up?
Answer: When two sibling components need the same data or one coordinates the other — e.g., filter input and filtered list share query state in parent.
Q: Composition vs prop drilling?
Answer: Pass JSX as children or named slots (sidebar, header) so intermediate components do not know about deep props.
<Layout sidebar={<Sidebar user={user} />} />
Q: Container vs presentational pattern?
Answer: Smart containers fetch data and pass props to dumb UI components. Still valid conceptually; hooks often collapse the split into one file.
Q: Colocation principle?
Answer: Keep state as close as possible to where it is used. Only lift when sharing is required — reduces unnecessary re-renders.
Key Points for Interviews
-
Lift to lowest common ancestor
-
Children props enable flexible layouts
-
Not every shared value needs Context
-
Single source of truth prevents sync bugs
-
Derive values instead of duplicating state