easyFrontend

Explain the concept of 'lifting state up' in React.

Q: Explain the concept of 'lifting state up' in React.

**Core concept (TL;DR).** When two or more components need to share or stay in sync over the same data, you move that state **up to their nearest common ancestor** and pass it down as props (with callbacks to update it). The parent becomes the **single source of truth**; the children become controlled by it. Shared state moves to the common parent Parent — owns state <text x="260" y="70" fill="curr

813 views

Understand the problem

'Lifting state up' is a pattern where the state is moved from a child component to its closest common ancestor component.

state managementdata flowpropscomponent communication

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Two inputs sharing one lifted state

import { useState } from "react";

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

export default function App() {
  const [celsius, setCelsius] = useState("");      // lifted to the parent
  const fahrenheit = celsius === "" ? "" : (celsius * 9) / 5 + 32;
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <CelsiusInput value={celsius} onChange={setCelsius} />
      <p>= {fahrenheit === "" ? "—" : fahrenheit + " °F"}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the purpose of the `key` prop when rendering lists in React?

What are the advantages of using React over plain JavaScript?