Lift shared state up

When two components need the same changing value, move that state to their closest common parent.

function TemperatureCalculator() {
  const [celsius, setCelsius] = useState('')

  return (
    <>
      <TemperatureInput
        label="Celsius"
        value={celsius}
        onChange={setCelsius}
      />
      <p>Fahrenheit: {convertToFahrenheit(celsius)}</p>
    </>
  )
}

The parent passes the current value down. The child reports edits through onChange. The converted value is calculated during rendering rather than stored as second state.

This creates one source of truth. Every child receives a snapshot derived from the same owner.

Do not lift every local detail. Whether a dropdown is open may matter only inside that dropdown. Moving all state to the page creates unnecessary prop wiring and broader renders.

Lift state when siblings need coordination or a parent must make decisions from the value. Keep it local otherwise.

Build two inputs that edit the same text. First give each local state, then lift it and confirm both always agree.