React · Advanced Patterns

Lifting State Up

Learn how to share state between components by moving it to their closest common ancestor.

Find videos you like?

Save to resource drawer for future reference!

What is Lifting State Up?

Share state between components

When multiple components need to share the same data, lift the state up to their closest common ancestor. The parent manages the state and passes it down via props!

The Pattern

Identify components that need the same state

Find their closest common parent

Move state to the parent

Pass state and updater functions as props

✅ Benefits

• Share state between siblings
• Single source of truth
• Synchronized data
• Easier to debug

💡 When to Use

• Multiple components need same data
• Sibling components communicate
• Keep data in sync
• Derived values needed

Simple Example

Sharing count between buttons

Lifting State to Parent

javascript

State lifted from children to parent

// Simple Example: Sharing Count
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Display count={count} />
      <Button1 count={count} setCount={setCount} />
      <Button2 count={count} setCount={setCount} />
    </div>
  );
}

function Display({ count }) {
  return <h1>Count: {count}</h1>;
}

function Button1({ count, setCount }) {
  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

function Button2({ count, setCount }) {
  return <button onClick={() => setCount(count + 5)}>+5</button>;
}

Console Output

// State lives in Parent

// Both buttons update the same count

// Display shows synchronized value

❯Click Button1: Count: 1

❯Click Button2: Count: 6

❯Click Button1: Count: 7

❯✅ All components share the same state

❯✅ Single source of truth

Interactive Preview

See lifting state up in action

Shared Count Dashboard

Parent owns the shared count and both buttons update it

Frontend

const { useState } = React;

function ParentPreview() {
  const [count, setCount] = useState(0);

  return (
    <div className="preview">
      <Display count={count} />
      <div className="actions">
        <ActionButton label="+1" onClick={() => setCount((c) => c + 1)} />
        <ActionButton label="+5" onClick={() => setCount((c) => c + 5)} />
      </div>
    </div>
  );
}

function Display({ count }) {
  return (
    <div className="display">
      <p>Shared Count</p>
      <strong>{count}</strong>
    </div>
  );
}

function ActionButton({ label, onClick }) {
  return (
    <button onClick={onClick} className="preview-btn">
      {label}
    </button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ParentPreview />);

Live Preview

Loading preview...

Real-World Example

Temperature converter with derived values

Temperature Calculator

javascript

Lifting state enables two-way sync and derived calculations

// ❌ Before: State in child components (can't share)
function TemperatureInput({ scale }) {
  const [temperature, setTemperature] = useState('');
  // Problem: Other component can't access this!
  return <input value={temperature} onChange={e => setTemperature(e.target.value)} />;
}

// ✅ After: Lift state to parent (shared!)
function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const celsius = scale === 'f' ? (temperature - 32) * 5/9 : temperature;
  const fahrenheit = scale === 'c' ? (temperature * 9/5) + 32 : temperature;

  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={celsius}
        onTemperatureChange={(temp) => {
          setTemperature(temp);
          setScale('c');
        }}
      />
      <TemperatureInput
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={(temp) => {
          setTemperature(temp);
          setScale('f');
        }}
      />
      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset>
      <legend>Enter temperature in {scale === 'c' ? 'Celsius' : 'Fahrenheit'}:</legend>
      <input
        value={temperature}
        onChange={e => onTemperatureChange(e.target.value)}
      />
    </fieldset>
  );
}

function BoilingVerdict({ celsius }) {
  if (celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

Console Output

// Type in Celsius input: 100

❯> Fahrenheit automatically shows: 212

❯> Verdict: "The water would boil."

// Type in Fahrenheit input: 50

❯> Celsius automatically shows: 10

❯> Verdict: "The water would not boil."

❯✅ Both inputs stay synchronized

❯✅ Verdict updates automatically

Key Takeaways

Single Source of Truth

State lives in one place, shared via props

Parent Manages State

Closest common ancestor owns the state

Pass Updaters Down

Children call functions to update parent state

Synchronized Data

All components see the same state

Fundamental Pattern!

Lifting state up is one of the most important patterns in React. Master it for effective component communication!

Previous Topic

Uncontrolled Components

Understand uncontrolled components, refs for forms, and when to use uncontrolled patterns.

Next Topic

Keys & Lists

Master key prop best practices, list performance, and common key anti-patterns.

Ask a Question

Have a question about Lifting State Up? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Advanced Patterns

Lifting State Up

Learn how to share state between components by moving it to their closest common ancestor.

Find videos you like?

Save to resource drawer for future reference!

What is Lifting State Up?

Share state between components

When multiple components need to share the same data, lift the state up to their closest common ancestor. The parent manages the state and passes it down via props!

The Pattern

Identify components that need the same state

Find their closest common parent

Move state to the parent

Pass state and updater functions as props

✅ Benefits

• Share state between siblings
• Single source of truth
• Synchronized data
• Easier to debug

💡 When to Use

• Multiple components need same data
• Sibling components communicate
• Keep data in sync
• Derived values needed

Simple Example

Sharing count between buttons

Lifting State to Parent

javascript

State lifted from children to parent

// Simple Example: Sharing Count
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Display count={count} />
      <Button1 count={count} setCount={setCount} />
      <Button2 count={count} setCount={setCount} />
    </div>
  );
}

function Display({ count }) {
  return <h1>Count: {count}</h1>;
}

function Button1({ count, setCount }) {
  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

function Button2({ count, setCount }) {
  return <button onClick={() => setCount(count + 5)}>+5</button>;
}

Console Output

// State lives in Parent

// Both buttons update the same count

// Display shows synchronized value

❯Click Button1: Count: 1

❯Click Button2: Count: 6

❯Click Button1: Count: 7

❯✅ All components share the same state

❯✅ Single source of truth

Interactive Preview

See lifting state up in action

Shared Count Dashboard

Parent owns the shared count and both buttons update it

Frontend

const { useState } = React;

function ParentPreview() {
  const [count, setCount] = useState(0);

  return (
    <div className="preview">
      <Display count={count} />
      <div className="actions">
        <ActionButton label="+1" onClick={() => setCount((c) => c + 1)} />
        <ActionButton label="+5" onClick={() => setCount((c) => c + 5)} />
      </div>
    </div>
  );
}

function Display({ count }) {
  return (
    <div className="display">
      <p>Shared Count</p>
      <strong>{count}</strong>
    </div>
  );
}

function ActionButton({ label, onClick }) {
  return (
    <button onClick={onClick} className="preview-btn">
      {label}
    </button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ParentPreview />);

Live Preview

Loading preview...

Real-World Example

Temperature converter with derived values

Temperature Calculator

javascript

Lifting state enables two-way sync and derived calculations

// ❌ Before: State in child components (can't share)
function TemperatureInput({ scale }) {
  const [temperature, setTemperature] = useState('');
  // Problem: Other component can't access this!
  return <input value={temperature} onChange={e => setTemperature(e.target.value)} />;
}

// ✅ After: Lift state to parent (shared!)
function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const celsius = scale === 'f' ? (temperature - 32) * 5/9 : temperature;
  const fahrenheit = scale === 'c' ? (temperature * 9/5) + 32 : temperature;

  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={celsius}
        onTemperatureChange={(temp) => {
          setTemperature(temp);
          setScale('c');
        }}
      />
      <TemperatureInput
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={(temp) => {
          setTemperature(temp);
          setScale('f');
        }}
      />
      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset>
      <legend>Enter temperature in {scale === 'c' ? 'Celsius' : 'Fahrenheit'}:</legend>
      <input
        value={temperature}
        onChange={e => onTemperatureChange(e.target.value)}
      />
    </fieldset>
  );
}

function BoilingVerdict({ celsius }) {
  if (celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

Console Output

// Type in Celsius input: 100

❯> Fahrenheit automatically shows: 212

❯> Verdict: "The water would boil."

// Type in Fahrenheit input: 50

❯> Celsius automatically shows: 10

❯> Verdict: "The water would not boil."

❯✅ Both inputs stay synchronized

❯✅ Verdict updates automatically

Key Takeaways

Single Source of Truth

State lives in one place, shared via props

Parent Manages State

Closest common ancestor owns the state

Pass Updaters Down

Children call functions to update parent state

Synchronized Data

All components see the same state

Fundamental Pattern!

Lifting state up is one of the most important patterns in React. Master it for effective component communication!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Uncontrolled Components

Keys & Lists

Building Your Learning Module...

Lifting State Up

The Pattern

Shared Count Dashboard

Single Source of Truth

Parent Manages State

Pass Updaters Down

Synchronized Data

Fundamental Pattern!

Uncontrolled Components

Keys & Lists

Lifting State Up

The Pattern

Shared Count Dashboard

Single Source of Truth

Parent Manages State

Pass Updaters Down

Synchronized Data

Fundamental Pattern!