Lifting state up in React

What is Lifting State Up?

Lifting state up is a pattern where you move shared state from child components to their closest common parent. When multiple components need the same data, you "lift" the state to the parent and pass it down via props.

The Problem

tsx

// ❌ Two siblings can't share state directly
function TemperatureCelsius() {
  const [temp, setTemp] = useState(0);
  return <input value={temp} onChange={e => setTemp(+e.target.value)} />;
}

function TemperatureFahrenheit() {
  const [temp, setTemp] = useState(32);
  return <input value={temp} onChange={e => setTemp(+e.target.value)} />;
}

// These two components are NOT synchronized

The Solution: Lift State Up

tsx

// ✅ Parent holds the shared state
function TemperatureConverter() {
  const [celsius, setCelsius] = useState(0);

  const handleCelsiusChange = (value: number) => setCelsius(value);
  const handleFahrenheitChange = (value: number) => setCelsius((value - 32) * 5 / 9);

  return (
    <div>
      <TemperatureInput
        label="Celsius"
        value={celsius}
        onChange={handleCelsiusChange}
      />
      <TemperatureInput
        label="Fahrenheit"
        value={celsius * 9 / 5 + 32}
        onChange={handleFahrenheitChange}
      />
    </div>
  );
}

function TemperatureInput({ label, value, onChange }: {
  label: string;
  value: number;
  onChange: (value: number) => void;
}) {
  return (
    <label>
      {label}:
      <input
        type="number"
        value={value}
        onChange={e => onChange(+e.target.value)}
      />
    </label>
  );
}

When to Lift State Up

Two or more components need the same data
A parent needs to coordinate child components
You need a single source of truth for shared data

When NOT to Lift State Up

State is only used by one component (keep it local)
Deeply nested components cause prop drilling → use Context or state management instead
State changes very frequently → lifting too high causes unnecessary re-renders

Step-by-Step Process

Identify the shared state in child components
Find their closest common ancestor
Move the state to the parent component
Pass state values as props to children
Pass setter functions as callbacks to children

Alternatives for Deep Hierarchies

Approach	When to Use
Lifting state up	1-2 levels of nesting
Context API	Many levels, infrequent updates
State management (Zustand, Redux)	Complex shared state across many components
Composition (children prop)	Avoiding prop drilling

Important:

Lifting state up ensures a single source of truth — only one component owns the data, and others receive it via props. It's the fundamental React pattern for sharing state between siblings. For deep trees, consider Context or external state managers instead.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

Lifting state up in React

#What is Lifting State Up?

#The Problem

#The Solution: Lift State Up

#When to Lift State Up

#When NOT to Lift State Up

#Step-by-Step Process

#Alternatives for Deep Hierarchies