Lifting state up betyr å flytte state fra en child-komponent til en felles parent, slik at flere children kan dele og holde samme data synkronisert. Det er standardløsningen når sibling-komponenter må koordinere.
() { [temp, setTemp] = (); ... }
Hvis to sibling-komponenter hver har sin egen kopi av relatert state, finnes det ingen måte for dem å holde konsistens på — endring av den ene påvirker ikke den andre.
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)} />;
}
Den delte state bor nå i parent (Calculator). Den sender verdien ned som prop og en setter slik at children kan be om endringer (opp). Nå gjenspeiler begge inputs samme kilde — redigering av en oppdaterer begge.
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 down, events up"-flow, brukt til å dele state.
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 er den fundamentale teknikken for deling av state mellom sibling/relaterte komponenter i komponentbaserte rammeverk — den opprettholder en enkelt kilde til sannhet i en felles parent slik at children holder seg synkronisert.
Det er ofte det første verktøyet du griper til før du legger til Context eller en store.
Å gjenkjenne når det er tid å løfte (siblings må koordinere) — og når løfting har gått for langt (forårsaket prop drilling, så det er tid for Context/store) — er kjernen i å strukturere komponent state på en god måte.