⚛️ Lifting State Up in React

? Quick Overview

Sometimes, two or more components need to share or synchronize data. Instead of duplicating state in each component, React encourages a technique called “Lifting State Up.”

It means moving shared state to the closest common ancestor component, so all child components can use the same data via props. This keeps your UI consistent and easier to reason about.

? Goal: Single source of truth in a parent component

? Key Concepts

• Shared State: Data used by multiple components.
• Common Ancestor: The nearest parent that can own that state.
• Top–Down Data Flow: Parent holds state, children receive it as props.
• Setter Props: Parent passes callback functions so children can update parent state.

? Example: Without Lifting State

Here, each input component manages its own temperature. They are related, but their states are completely independent, so typing in one box does not affect the other.

// Each input manages its own local temperature state
function CelsiusInput() {
const [temp, setTemp] = React.useState("");
return (
<input
value={temp}
onChange={(e) => setTemp(e.target.value)}
placeholder="Celsius"
/>
);
}

function FahrenheitInput() {
const [temp, setTemp] = React.useState("");
return (
<input
value={temp}
onChange={(e) => setTemp(e.target.value)}
placeholder="Fahrenheit"
/>
);
}

?️ Example: Lifting State to the Parent

Now we move the temperature state into a parent component. The parent becomes the single source of truth, and children receive values and setter callbacks via props.

// Parent owns the temperature; children just display and update it
function TemperatureCalculator() {
const [celsius, setCelsius] = React.useState("");

const toFahrenheit = (c) => (c * 9) / 5 + 32;

return (
<div>
<CelsiusInput value={celsius} onChange={setCelsius} />
<FahrenheitDisplay fahrenheit={toFahrenheit(celsius)} />
</div>
);
}

function CelsiusInput({ value, onChange }) {
return (
<input
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder="Celsius"
/>
);
}

function FahrenheitDisplay({ fahrenheit }) {
return <p>Fahrenheit: {fahrenheit}</p>;
}

? Why Lift State?

• ✅ Keeps related components synchronized.
• ✅ Reduces duplicate state and inconsistencies.
• ✅ Makes debugging and data flow easier.
• ✅ Follows React’s unidirectional (top-down) data flow.

⚙️ Identifying When to Lift State

• When multiple components depend on the same data.
• When an action in one component should affect another.
• When sibling components need to communicate indirectly.
• When you see the same state duplicated in multiple places.

? Example: Sibling Communication via Parent

Two sibling components (Sender and Receiver) share data by lifting state into their common parent. They never talk directly to each other — only through the parent.

// Parent holds the shared message, siblings read/write through props
function Parent() {
const [message, setMessage] = React.useState("");

return (
<div>
<Sender onSend={setMessage} />
<Receiver message={message} />
</div>
);
}

function Sender({ onSend }) {
return (
<input
placeholder="Type message"
onChange={(e) => onSend(e.target.value)}
/>
);
}

function Receiver({ message }) {
return <p>Received: {message}</p>;
}

? Benefits of Lifting State

• Improved data consistency between components.
• A clear, single source of truth — easier to manage and debug.
• More predictable re-renders and performance tuning.
• Cleaner mental model for how data flows through your app.