Lifting state up betekent het verplaatsen van state van een child-component naar een gemeenschappelijke parent, zodat meerdere children dezelfde data kunnen delen en met elkaar gesynchroniseerd blijven. Het is de standaardoplossing wanneer sibling-componenten moeten coördineren.
() { [temp, setTemp] = (); ... }
Als twee sibling-componenten elk hun eigen kopie van gerelateerde state hebben, is er geen manier voor hen om consistent te blijven — het aanpassen van één component heeft geen effect op de ander.
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)} />;
}
De gedeelde state woont nu in de parent (Calculator). Deze geeft de waarde omlaag als prop en een setter door, zodat children wijzigingen kunnen aanvragen (omhoog). Nu weerspiegelen beide inputs dezelfde bron — het aanpassen van één update automatisch beide.
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)
Dit is dezelfde "data down, events up"-flow, toegepast om state te delen.
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.
Lifting state up is de fundamentele techniek voor het delen van state tussen sibling/gerelateerde componenten in component-gebaseerde frameworks — het behoudt een enkele bron van waarheid in een gemeenschappelijke parent, zodat de children gesynchroniseerd blijven.
Het is vaak het eerste gereedschap waar je naar grijpt voordat je Context of een store toevoegt.
Herkennen wanneer je moet liften (siblings moeten coördineren) — en wanneer lifting te ver is gegaan (waardoor prop drilling ontstaat, dus Context/store nodig is) — is essentieel voor het goed structureren van component state.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren