Why Lifting state up in React Native? - Purpose & Use Cases

The Big Idea

What if your app's data could magically stay in sync everywhere without extra effort?

The Scenario

Imagine you have two buttons in different parts of your app, and both need to show the same number that changes when either button is pressed.

You try to keep each button's number separately, but then they get out of sync and confuse users.

The Problem

Managing the same data in multiple places means you have to update each one manually.

This is slow, causes bugs, and makes your app behave unpredictably.

The Solution

Lifting state up means moving the shared data to a common parent component.

Now both buttons read and update the same source of truth, keeping everything in sync automatically.

Before vs After

✗ Before

const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

✓ After

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

What It Enables

This lets your app stay consistent and easy to manage, even as it grows bigger and more interactive.

Real Life Example

Think of a shopping app where the cart icon and the checkout page both show the number of items.

Lifting state up keeps these numbers perfectly matched without extra work.

Key Takeaways

Sharing state in one place avoids confusion and bugs.

Lifting state up keeps your app data consistent.

It makes your app easier to build and maintain.