When you start building React apps, you’ll often notice that two or more components need to share the same data. Maybe one component updates something, and another component needs to display it.
If each component keeps its own version of the data, things quickly get messy.

This is where a powerful React concept comes in:

⭐ What Is “Lifting State Up”?

Lifting state up simply means moving the shared state to the closest parent component so that all child components can use the same, single source of truth.

Instead of each child component having its own copy of the state, the parent keeps the state and passes it down through props.

---

🧠 Why Do We Need It?

Imagine this situation:

• Child A updates a value
• Child B needs to display that value
• But each one has separate state…

You’ll get problems like:

• Data mismatch
• Incorrect UI
• Extra logic to sync values

Lifting the state to the parent solves all of this.

---

📦 A Simple Example

Let’s say we want one button to increase a number, and another component to display it.

❌ Without Lifting State Up

Each child keeps its own state — they won’t be in sync.

Child A: count = 1  
Child B: count = 3  

That’s obviously not ideal.

---

✅ With Lifting State Up

We move the state to the parent:

Parent.js

import { useState } from "react";
import Display from "./Display";
import CounterButton from "./CounterButton";

export default function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <CounterButton count={count} setCount={setCount} />
      <Display count={count} />
    </>
  );
}

CounterButton.js

export default function CounterButton({ count, setCount }) {
  return (
    <button onClick={() => setCount(count + 1)}>
      Increase ({count})
    </button>
  );
}

Display.js

export default function Display({ count }) {
  return <h2>Current Count: {count}</h2>;
}

Now both components read from the same count value stored in Parent.

---

🎯 When Should We Lift State Up?

Use this pattern when:

• Two or more components need the same value
• One component updates something another must read
• We feel we are duplicating state unnecessarily

If the app grows even bigger, we might later use tools like Context, Redux, or Zustand, but lifting state up remains the simplest pattern for small to medium components.

---

🚀 Final Thoughts

Lifting state up keeps our React components:

• Consistent
• Organized
• Easy to understand
• Easy to maintain

Whenever two components need to share data, think:
👉 Should I lift the state up to a parent?

This single pattern can help us avoid many common bugs and confusion as you continue to grow as a React developer.