Part 13: Lifting State Up & State Sharing Patterns

When two or more sibling components need access to the same state or need to react to each other's changes, you must Lift State Up to their closest common ancestor.

1. The Problem: Disconnected Siblings

Imagine a Temperature Converter: - CelsiusInput needs to know the temperature. - FahrenheitInput needs to know the temperature. - Neither component can directly access the other component's local useState.

          [ Ancestor: TemperatureCalculator ]
                         │
          ┌──────────────┴──────────────┐
          ▼                             ▼
    [ CelsiusInput ]           [ FahrenheitInput ]

2. Implementation: Lifting State to the Parent

The parent holds the single source of truth and passes state down via props, along with callbacks to update that state:

import { useState } from 'react';

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset className="border p-3 rounded mb-3">
      <legend>Enter temperature in {scale}:</legend>
      <input
        type="number"
        value={temperature}
        onChange={(e) => onTemperatureChange(e.target.value)}
        className="border px-3 py-1 rounded w-full"
      />
    </fieldset>
  );
}

export default function TemperatureCalculator() {
  const [celsius, setCelsius] = useState(0);

  const handleCelsiusChange = (val) => setCelsius(val);
  const handleFahrenheitChange = (val) => setCelsius(((val - 32) * 5) / 9);

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

  return (
    <div className="max-w-md p-6 border rounded-xl shadow-lg">
      <h2 className="text-xl font-bold mb-4">Temperature Converter</h2>
      <TemperatureInput
        scale="Celsius"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange}
      />
      <TemperatureInput
        scale="Fahrenheit"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange}
      />
    </div>
  );
}

Key Takeaways

• Keep a single source of truth for any data that changes.
• Move shared state up to the closest common parent component.
• Pass state down as props, and update it by invoking callbacks passed from the parent.

In Part 14, we will explore Component Composition vs. Inheritance!