Wat betekent 'lifting state up'?

Question

Accepted Answer

**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. ## Waarom het belangrijk is ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` 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. ## De oplossing: lift de state naar de parent ```jsx 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 */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return 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. ## Het patroon ```text 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. ## Wanneer lifting te veel wordt ```text 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. ``` ## Waarom het belangrijk is 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.