Why Common lifting state patterns in React? - Purpose & Use Cases

The Big Idea

What if your app's parts could talk to each other without breaking or confusing you?

The Scenario

Imagine you have two buttons in different parts of your app that need to update the same number shown on the screen.

You try to update the number separately inside each button's code.

The Problem

Updating the number separately causes confusion because the buttons don't share the same data.

The number can get out of sync, making your app buggy and hard to fix.

The Solution

By lifting the number's state up to a common parent component, both buttons share the same source of truth.

When one button changes the number, the other button and the display update automatically and stay in sync.

Before vs After

✗ Before

import React, { useState } from 'react';
const ButtonA = () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } const ButtonB = () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }

✓ After

import React, { useState } from 'react';
const ButtonA = ({ count, setCount }) => <button onClick={() => setCount(count + 1)}>{count}</button>;
const ButtonB = ({ count, setCount }) => <button onClick={() => setCount(count + 1)}>{count}</button>;
const Parent = () => { const [count, setCount] = useState(0); return <> <ButtonA count={count} setCount={setCount} /> <ButtonB count={count} setCount={setCount} /> </>; }

What It Enables

This pattern makes your app's data flow clear and keeps all parts in sync effortlessly.

Real Life Example

Think of a shopping cart where the item count updates from different buttons across the page but always shows the same total number.

Key Takeaways

Lifting state shares data between components.

It prevents inconsistent or out-of-sync UI.

Makes your app easier to understand and maintain.