Lifting state up

When two components need the same data, move the state to their closest common parent and pass it down with a setter. There is then one source of truth and the siblings cannot disagree.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what it means to lift state and why it gives one source of truth
Move shared state to the parent and pass it down with a setter
Spot a prop copied into local state and explain why it drifts

In practice

A few lines that show Lifting state up doing its job.

TSX

function Converter() {
  const [celsius, setCelsius] = useState(20);
  return (
    <>
      <TemperatureInput label="C" value={celsius} onChange={setCelsius} />
      <TemperatureInput
        label="F"
        value={celsius * 9 / 5 + 32}
        onChange={(f) => setCelsius((f - 32) * 5 / 9)}
      />
    </>
  );
}

The common mistake

Watch for

Copying a prop into local state with useState(props.value). The copy stops following the prop after the first render, and the two drift apart.

What to know first

Your roadmap puts these before Lifting state up, unless you already know them.

How it stays learned

Once a session shows you understand Lifting state up, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Lifting state up.

Previous in the module← Event handlers