11 — Lifting State Up

🔍 Le problème

Quand deux composants frères (siblings) doivent partager le même état, où placer le state ?

// ❌ Chaque enfant a son propre state — pas synchronisé
function Parent() {
    return (
        <>
            <EnfantA />   {/* son propre state */}
            <EnfantB />   {/* un autre state indépendant */}
        </>
    );
}

// ✅ Le state est "remonté" dans le parent
function Parent() {
    const [valeur, setValeur] = useState('');
    return (
        <>
            <EnfantA valeur={valeur} onChange={setValeur} />
            <EnfantB valeur={valeur} />
        </>
    );
}

📐 Le principe

     Parent (détient le state)
     /          \
  EnfantA       EnfantB
  (modifie)     (lit)
  
  Props ↓       Props ↓
  onChange()    valeur

🔄 Le flux de données

// 1. Le parent détient le state
function Parent() {
    const [temperature, setTemperature] = useState(20);

    return (
        <>
            {/* 2. Passe un callback pour modifier */}
            <ControleTemp 
                temp={temperature} 
                onTempChange={setTemperature} 
            />
            
            {/* 3. L'autre enfant reçoit la valeur en lecture */}
            <AffichageTemp temp={temperature} />
        </>
    );
}

// L'enfant qui modifie
function ControleTemp({ temp, onTempChange }) {
    return (
        <input 
            type="range" 
            value={temp}
            onChange={(e) => onTempChange(Number(e.target.value))}
        />
    );
}

// L'enfant qui lit
function AffichageTemp({ temp }) {
    return <p>Température : {temp}°C</p>;
}

🧩 Quand faire du Lifting State Up ?

• Deux composants doivent afficher la même donnée.
• Un composant doit réagir aux changements d'un frère.
• On veut synchroniser des inputs ou des vues.

⚠️ Inverse Data Flow

Les données descendent via les props, les modifications remontent via les callbacks :

// Props ↓ (données)
<Enfant valeur={state} />

// Callbacks ↑ (événements)
<Enfant onValeurChange={(newVal) => setState(newVal)} />

🚀 Démo interactive

▼ Convertisseur de température — état partagé

📝 Résumé