Sollevare lo stato significa spostare lo stato da un componente figlio a un genitore comune in modo che più figli possano condividere e rimanere sincronizzati con gli stessi dati. È la soluzione standard quando i componenti fratelli devono coordinarsi.
() { [temp, setTemp] = (); ... }
Se due componenti fratelli mantengono ciascuno una propria copia dello stato correlato, non c'è modo per loro di rimanere coerenti — cambiare uno non influisce sull'altro.
function Calculator() {
const [temperature, setTemperature] = useState(0); // state LIFTED to the parent
return (
<>
{/* pass state DOWN as a prop, and a setter to update it */}
<TempInput scale="C" value={temperature} onChange={setTemperature} />
<TempInput scale="F" value={temperature} onChange={setTemperature} />
<p>Both inputs share one value: {temperature}</p>
</>
);
}
function TempInput({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}
Lo stato condiviso ora risiede nel genitore (Calculator). Passa il valore verso il basso come prop e un setter in modo che i figli possano richiedere modifiche (verso l'alto). Ora entrambi gli input riflettono la stessa fonte — modificare uno aggiorna entrambi.
1. Find the closest COMMON ancestor of the components that need to share
2. Move the state UP into that ancestor
3. Pass the value DOWN as props
4. Pass a callback DOWN so children can request updates (data up via events)
Questo è lo stesso flusso "dati verso il basso, eventi verso l'alto", applicato per rendere lo stato condiviso.
Lifting too high (state ends up far from where it's used) → prop drilling.
At that point, prefer Context or a state library instead of lifting further.
Sollevare lo stato è la tecnica fondamentale per condividere lo stato tra componenti fratelli/correlati nei framework basati su componenti — mantiene una singola fonte di verità in un genitore comune in modo che i figli rimangono sincronizzati.
È spesso lo primo strumento a cui ricorrere prima di aggiungere Context o uno store.
Riconoscere quando sollevare (i fratelli hanno bisogno di coordinarsi) — e quando il sollevamento è andato troppo lontano (causando prop drilling, quindi è il momento di Context/uno store) — è fondamentale per strutturare bene lo stato dei componenti.