Lifting State Up in React

Analogy categoryAnalogies

Introduction

Lifting state up is the pattern of moving state from a child component to its closest common ancestor when multiple components need to share and stay in sync with the same data. Because React's data flow is one-way (props down, events up), sibling components cannot directly communicate; the parent must own the shared state and pass it down as props, along with callback functions the children use to request updates.

🏏

Cricket analogy: Lifting state up when siblings can't directly communicate is like two fielders needing to coordinate a run-out relay, so the captain (parent) holds the game plan and relays instructions down to each, since fielders can't independently rewrite the plan.

Syntax

jsx

function Parent() {
  const [value, setValue] = useState('');

  return (
    <>
      <Input value={value} onChange={setValue} />
      <Display value={value} />
    </>
  );
}

function Input({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

function Display({ value }) {
  return <p>You typed: {value}</p>;
}

Explanation

Here, Input and Display are siblings that both need access to the same value. Instead of each managing its own local state, Parent owns the single source of truth (value) and passes it down to both children. Input also receives an onChange callback so it can request a state update, which flows back up to Parent and re-renders both siblings with the new value — demonstrating props down, events up in action.

🏏

Cricket analogy: Input and Display as siblings sharing one source of truth in Parent is like the striker and non-striker both needing the same run count, held by the umpire (parent) who updates it and relays back to both batters via the scoreboard.

Example

jsx

function TemperatureConverter() {
  const [celsius, setCelsius] = useState(0);

  const fahrenheit = (celsius * 9) / 5 + 32;

  return (
    <div>
      <CelsiusInput value={celsius} onChange={setCelsius} />
      <p>Fahrenheit: {fahrenheit.toFixed(1)}</p>
    </div>
  );
}

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

Output

Typing a Celsius value into the input calls onChange, which invokes setCelsius in the parent. This updates celsius state, causing TemperatureConverter to re-render and recompute fahrenheit — instantly reflecting the converted value in the paragraph below, even though the conversion display is a sibling of the input, not a parent or child of it.

🏏

Cricket analogy: Typing a Celsius value causing the Fahrenheit display to update instantly, even though it's a sibling not a parent, is like a run-rate calculator on the scoreboard updating the moment the over count changes elsewhere on the same board.

Key Takeaways

Lifting state up means moving shared state to the closest common ancestor of the components that need it.
The ancestor passes the state down as props and provides callback props for children to request changes.
This keeps a single source of truth, preventing sibling components from getting out of sync.
It is a direct consequence of React's one-way data flow: siblings can't talk to each other directly.
Overusing lifting for deeply nested trees can lead to prop drilling; Context may be preferable at scale.