Lifting State Up - Communication Between Components

Sometimes two sibling components need access to the same data — like a search input and its results list, or a shopping cart count that shows up in both the header and the cart page. In such cases, the state should live in the closest common parent of both components — this is called "lifting state up."

The Problem: Duplicated State

If each component keeps its own state, they get out of sync. The solution: move the state one level up and pass it down through props.

Example: Temperature Converter

function TemperatureInput({ label, value, onChange }) {
  return (
    <div>
      <label>{label}: </label>
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </div>
  );
}

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

  const fahrenheit = celsius === '' ? '' : (Number(celsius) * 9) / 5 + 32;

  return (
    <div>
      <TemperatureInput label="Celsius" value={celsius} onChange={setCelsius} />
      <TemperatureInput
        label="Fahrenheit"
        value={fahrenheit}
        onChange={(f) => setCelsius(((Number(f) - 32) * 5) / 9)}
      />
    </div>
  );
}

Here the celsius state lives only in Converter (the parent) — both TemperatureInput children just use it via props, which keeps them always in sync.

When Should You Lift State?

• When two or more components need the same, in-sync data.
• When an action in one component should affect another component's UI.
• If only one component uses a piece of state, keep it local there — lifting everything up adds unnecessary complexity.

Key Takeaways

• Shared state lives in the closest common parent.
• The parent passes the state and its setter function down to children via props.
• This pattern is enough for small apps; larger apps often scale better with Context or Redux.