Hvad betyder det at løfte state op?

Question

Accepted Answer

**Lifting state up** (løfte state op) betyder at flytte state fra en child-komponent til en **fælles parent**, så flere children kan dele og holde synkronisering af de samme data. Det er standardløsningen når sibling-komponenter skal koordinere. ## Problemet: siblings har brug for delte data ```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 ``` Hvis to sibling-komponenter hver har deres egen kopi af relateret state, er der ingen måde for dem at holde konsistent — at ændre en påvirker ikke den anden. ## Løsningen: løft state op til 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)} />; } ``` Det delte state bor nu i parenten (`Calculator`). Den sender værdien *ned* som en prop og en setter, så children kan anmode om ændringer (*op*). Nu afspejler begge inputs den samme kilde — at redigere en opdaterer begge. ## Mønsteret ```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) ``` Dette er samme "data ned, events op"-flow, anvendt for at gøre state delt. ## Når løfting bliver for meget ```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. ``` ## Hvorfor det betyder noget At løfte state op er den fundamentale teknik for at **dele state mellem sibling/relaterede komponenter** i komponentbaserede frameworks — det holder en enkelt kilde til sandhed i en fælles parent, så children holder sig i synkronisering. Det er ofte det *første* værktøj at gribe til før man tilføjer Context eller en store. At genkende hvornår man skal løfte (siblings skal koordinere) — og hvornår løfting er gået for langt (forårsager prop drilling, så det er tid til Context/en store) — er grundlaget for at strukturere komponent-state godt.