🚀 Why Do Buttons Count Separately? Introducing: Lifting the State Up — React Series [Part-18]

“In React, components are like islands. Unless you build bridges, they can’t talk to each other.” 🌉

🧪 The Problem: Two Buttons, Two Minds

Let’s revisit the simple example we gave earlier:

function App() {
  return (
    <>
      <CounterButton />
      <CounterButton />
    </>
  );
}

function CounterButton() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(count + 1);
  }
  return <button onClick={increment}>Clicked {count} times</button>;
}

What happens here?

You see two identical buttons. But when you click them:

• The first button shows: Clicked 1 times
• The second button still shows: Clicked 0 times

Click the second one? It now becomes: Clicked 1 times
But the first one stays the same.

🧠 Why Does This Happen?

It’s all about state.

Every time you write:

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

You’re creating a brand-new, isolated memory just for that one component.

Even if you reuse the same <CounterButton /> twice, each instance gets its own copy of state.

✅ React components are independent by default. They don’t automatically talk to each other or share data — unless you explicitly tell them to.

Think of it like copying a Google Form template — each person gets their own form to fill. Their answers don’t affect anyone else.

❓ But What If You Want a Shared Count?

Let’s say you want this:

“I want two buttons. But clicking any of them should update the same counter.”

In other words, both buttons should act as controllers for a single piece of data.
Now you need to share state between them.

But how?

🚀 The Solution: Lifting the State Up

Here’s the golden rule in React:

If two components need to share data, move the state to their closest common parent.

This pattern is called Lifting the State Up.

Instead of letting each <CounterButton /> manage its own count, we’ll move the state one level up into their parent.

Get Jaswanth Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s build it step-by-step.

🔧 Step 1: Move State to the Parent

We take the state out of CounterButton and place it into App.

Here App is parent and CounterButton is child. We moved state from children to parent . So the state can belongs to all children of same parent. This is called Lifting the State Up !

Also Note that , after the state and setState function are defined in Parent, They should be passed to children as props , so the children can access these…

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <div>
      <h1>Shared Counter</h1>
      <CounterButton count={count} onClick={handleClick} />
      <CounterButton count={count} onClick={handleClick} />
    </div>
  );
}

🔧 Step 2: Receive Props in Button Component

Now the CounterButton no longer holds its own state — it just uses what’s passed down.

function CounterButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

🔄 What’s Happening Behind the Scenes?

Let’s break it down:

• count and setCount live in App — the common parent.
• Both CounterButton components receive the same count and onClick via props.
• When any button is clicked, it calls handleClick(), which updates the state in App.
• That updated count is passed to both buttons — so they both show the latest value.

✅ One shared state, two components — perfectly in sync.

📈 You’ve Just Built: One Brain, Many Hands

This is what lifting state up enables:

• One place controls the logic
• Multiple places can view and trigger changes
• The UI stays synchronized

🧠 Why Is This a Big Deal?

Here’s why lifting state up is so powerful in real-world apps:

• Two or more components need to show the same data
• You want to coordinate actions between them
• You want to separate logic from presentation

Without shared state, every part of your UI becomes an island.
With lifted state, they become part of a connected system.

🧪 Quick Experiment

Try adding a third button:

<CounterButton count={count} onClick={handleClick} />

Click any button — and all three update.
That’s the power of one source of truth.

🔍 Recap: Key Learnings

• useState
  It creates local, isolated state for a single component. Every time you call useState, you're giving that component its own private memory space that no other component can access.
• Props
  Props allow you to pass data or functions from a parent component to its child components. It’s how you give child components access to data they don’t own.
• Lifting State Up
  When multiple components need to access or modify the same data, you should move (or “lift”) that state to their closest common parent. This ensures they all refer to the same source of truth and stay in sync.

🎓 Real-World Use Cases

Here are just a few examples where this is essential:

• Showing the same shopping cart total in multiple places
• Theme toggles affecting the entire app
• Syncing video/audio players
• Keeping filters, tabs, or views in sync

🚪 Final Thoughts

State is the heart of a React app.
Managing it well separates beginner apps from scalable, real-world systems.

Whenever two components need to:

• Share data
• Stay in sync
• React to each other’s changes

👉 Lift the state up.

It’s a small change in code, but a big step in thinking.

⏭️ What’s Next?

In the next part of our React Series, we’ll explore Derived State — when you don’t need to store something explicitly in state, but calculate it dynamically from props or other state values.

Until then, keep lifting… and keep learning. 🚀

🙌 Thanks for Reading!

I hope this blog helped you understand how state works in React and why sometimes we need to lift the state up for better coordination between components. React becomes truly powerful when you grasp how data flows and how components communicate.

If you found this helpful, don’t forget to support my work by subscribing to my YouTube channel — I regularly post content on web development, React, and full-stack tips that’ll boost your skills!

🎥 Subscribe here → https://www.youtube.com/@JaswanthkumarPalavalasa

Stay curious, keep building, and happy coding! 💻🚀