Lifting State Up in React: When and Why

Lifting State Up in React: When and Why

Lifting state up is a core React pattern. Here is when to lift state and when to keep it local.

What Lifting State Up Means

When two sibling components need the same state, you move that state to their common parent. The parent owns the state and passes it down to both siblings as props.

When to Lift State

When two or more components need the same data and must stay in sync, lift the state to their common parent. This gives the data a single source of truth.

When to Keep State Local

When only one component needs the state, keep it local. Lifting unnecessarily creates re-renders in components that do not use the state.

The Single Source of Truth Principle

Lifting creates a single source of truth: the parent owns the data, and children read it as props. This prevents the drift that happens when each child keeps its own copy.

How to Lift State

Move the useState call to the common parent. Pass the value and a setter (or a callback) down to the children as props. The children read the value and call the callback to update.

Lift Only What Is Shared

Do not lift everything to the root. Lift only what siblings genuinely share. Lifting all state creates a giant root and excessive re-renders, which hurts performance.

The Takeaway

Lift state up when siblings need the same data and must stay in sync, moving the useState to their common parent. Keep state local when only one component needs it. Lift only what is genuinely shared, not everything.