När ska global respektive lokal state användas
Tillämpa principen om samlokalisering: håll state så nära sin konsument som möjligt och lyft det endast när flera orelaterade komponenter behöver det.
När ska global respektive lokal state användas är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Frågan om var state ska ligga
Varje del av state har en optimal plats. Om du väljer fel plats leder det antingen till besvärlig prop drilling eller onödig komplexitet med global state. Den vägledande principen är att hålla state så nära sina användare som möjligt.
Lokalt komponent-state
Om bara en komponent använder state hör det hemma i komponentens useState/ref. Det behöver inte delas — håll det lokalt. Detta är det enklaste och vanligaste fallet.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Lyfta upp state
När två syskonkomponenter behöver samma state lyfter du upp det till deras närmaste gemensamma förälder. Skicka ned det som props och callbacks. Detta är standard i React/Vue innan du tar till en global store.
Delad Context — delning på mellannivå
När state behöver delas i en delträdstruktur utan prop drilling är Context (React) eller provide/inject (Vue) rätt verktyg. Detta är till för delning inom ett begränsat område, till exempel en sida eller en funktionsmodul.
Global store — state för hela applikationen
Använd en global store (Redux, Zustand, Pinia) för state som: 1) används av många orelaterade komponenter, 2) behöver finnas kvar vid navigering, 3) har komplex uppdateringslogik, 4) drar nytta av inspektion i DevTools.
Exempel: Lokalt state
Lokalt state passar för: värden i formulärfält, om en tooltip är öppen eller stängd, synlighet för modaler, hover-state, animations-state och laddningsindikatorer som hör till en enda komponent.
Exempel: Upplyft state
Upplyft state passar för: ett delat filter som används av två syskonlistor, vald flik i en flikgrupp och formulärdata som delas mellan två steg.
Exempel: Context / provide
Context passar för: aktuellt tema, autentiserad användare, locale/språk, feature flags och en notifieringsstack — sådant som används på många nivåer men uppdateras sällan.
Exempel: Global store
Global store passar för: varukorg, autentiseringstoken + användarobjekt, notifieringskö (meddelanden visas i en toast var som helst ifrån) och realtidsdata som flera vyer visar samtidigt.
Server-state kontra client-state
Nätverksdata (som hämtas från ett API) är en särskild kategori: server-state. Den behöver hantering av laddning och fel, cachning samt ogiltigförklaring. React Query / SWR / TanStack Query hanterar server-state så att din store kan fokusera på verkligt client-state.
Vanligt misstag: allt i den globala storen
Lägg inte all state i den globala storen bara för säkerhets skull. Lokalt state är billigare, enklare och lättare att testa. Överanvändning av global state skapar kopplingar mellan komponenter som borde vara oberoende.
Beslutsmodell
Fråga: 1) Behöver andra komponenter detta? Nej → lokalt. 2) Behöver nära syskonkomponenter det? Ja → lyft upp det. 3) Behöver ett delträd av komponenter det? Ja → context/provide. 4) Behöver många orelaterade komponenter det, eller behöver det kunna inspekteras i DevTools? Ja → global store.
Snabbkontroll
Var bör du lagra state för om en enda accordion-komponent är öppen eller stängd?
Sammanfattning: Var state ska ligga
Princip: håll state så nära användarna som möjligt. Lokalt useState/ref för state i en enda komponent. Lyft upp state när syskonkomponenter behöver dela det. Context/provide för delning i ett delträd. Global store för state som omfattar hela applikationen och har komplexa uppdateringar. Server-state (API-data) hör hemma i React Query/SWR, inte i den globala storen.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”När ska global respektive lokal state användas” gratis?
Ja – hela texten till ”När ska global respektive lokal state användas” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”När ska global respektive lokal state användas”?
Tillämpa principen om samlokalisering: håll state så nära sin konsument som möjligt och lyft det endast när flera orelaterade komponenter behöver det. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”När ska global respektive lokal state användas”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Redux Toolkit: createSlice och configureStore
- Zustand för lättviktig React-state
- Pinia för Vue: defineStore och storeToRefs
- När ska global respektive lokal state användas