Lifting State Up

9 min read

Sharing State Between Siblings

When two sibling components need to share or sync state, lift the state up to their closest common parent. The parent holds the state and passes data and setter callbacks down as props.

jsx

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset>
      <legend>Temperature in {scale === "c" ? "Celsius" : "Fahrenheit"}</legend>
      <input
        value={temperature}
        onChange={e => onTemperatureChange(e.target.value)}
      />
    </fieldset>
  );
}

function Calculator() {
  const [celsius, setCelsius] = useState("");
  const fahrenheit = celsius !== "" ? (celsius * 9) / 5 + 32 : "";

  return (
    <>
      <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={setCelsius} />
      <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={f => setCelsius(((f - 32) * 5) / 9)} />
    </>
  );
}

Lifting state is the React-idiomatic solution for local shared state. Only reach for a global state manager (Context, Zustand, Redux) when lifting becomes impractical due to deep nesting or many consumers.

Ready to test yourself?

Practice React— quiz & coding exercises