Lifting State Up in React (Sharing State the Right Way)

The Problem

Two components need the same data.

Example:

• Login component logs in a user
• Dashboard component needs that user info

If both manage their own state → chaos.

The Solution: Lift State Up

Move the state to the closest common parent.

Example

function App() {
  const [user, setUser] = useState(null);

  return (
    <>
      <Login setUser={setUser} />
      <Dashboard user={user} />
    </>
  );
}

How This Works

• App owns the state
• Login updates it
• Dashboard consumes it

One source of truth.

Backend Analogy

Think of:

• Parent → service layer
• Children → controllers

Controllers don’t own data — services do.

When to Lift State

Lift state when:

• Multiple components need the same data
• Data must stay in sync

Warning Sign

If you’re passing props through many layers, stop.

You’re about to need global state.

Key Takeaway

Shared data should live above the components that use it