Lifting state up betyder att flytta state från en barnkomponent till en gemensam förälder så att flera barn kan dela och stanna synkroniserade med samma data. Det är standardlösningen när syskonkomponenter behöver koordinera.
() { [temp, setTemp] = (); ... }
Om två syskonkomponenter var och en håller sitt eget kopior av relaterad state, finns det inget sätt för dem att förbli konsekventa — att ändra en påverkar inte den andra.
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 delade staten bor nu i föräldern (Calculator). Den skickar värdet ner som en prop och en setter så att barn kan begära ändringar (upp). Nu återspeglar båda inmatningsfälten samma källa — att redigera en uppdaterar båda.
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)
Detta är samma "data ner, händelser upp"-flöde, tillämpat för att göra state delat.
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 är den grundläggande tekniken för delning av state mellan syster-/relaterade komponenter i komponentbaserade ramverk — den håller en enda källa till sanningen i en gemensam förälder så att barnen förblir synkroniserade.
Det är ofta det första verktyget att gripa till innan man lägger till Context eller en store.
Att känna igen när man ska lyfta (systrar behöver koordinera) — och när lyftet har gått för långt (orsakar prop drilling, så det är dags för Context/en store) — är kärnor i att strukturera komponentstate väl.