Lifting State Up
When two sibling components need to share state, move (lift) that state to their closest common parent. The parent owns the state and passes it down as props, along with a callback to update it.
Lifting state is like moving the TV remote to the coffee table so everyone on the couch can reach it — instead of each person having their own remote that might get out of sync.
This is React's fundamental state-sharing mechanism before reaching for Context or external stores. Example: two temperature inputs (Celsius/Fahrenheit) that sync — lift the temperature value to the parent, convert in each child. The downside is prop drilling: if the common ancestor is many levels up, you end up threading props through intermediate components that don't use them. Context or composition (passing components as props) solves this.
Lifting state creates a single source of truth, which is a core React principle. The tradeoff is re-rendering: when the parent's state changes, all children re-render. React.memo on children and useMemo for derived values mitigate this. The decision of where to place state follows the 'state colocation' principle — keep state as close to where it's used as possible, only lift when sharing is required. Over-lifting (putting everything in a top-level store) causes global re-renders and defeats React's component isolation.
Lifting state moves shared state to the closest common parent, creating a single source of truth. The parent passes state down as props and update callbacks. I follow the state colocation principle — keep state close to where it's used, only lift when sibling components need to share. For deep trees, I use Context to avoid prop drilling rather than lifting to the root.
Lifting too much state to the top level. This turns the app into a re-render cascade where every state change re-renders the entire tree. Only lift what genuinely needs to be shared.