Hvornår skal global eller lokal state bruges
Anvend princippet om colocation: hold state så tæt på forbrugeren som muligt, og løft den kun, når flere uafhængige komponenter har brug for den.
Hvornår skal global eller lokal state bruges er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Spørgsmålet om tilstandens placering
Alle dele af tilstanden har et optimalt sted at høre hjemme. Hvis du vælger den forkerte placering, får du enten besværlig prop drilling eller unødvendig kompleksitet i den globale tilstand. Det overordnede princip er at holde tilstanden så tæt på dens forbrugere som muligt.
Lokal komponenttilstand
Hvis kun én komponent bruger tilstanden, hører den hjemme i komponentens useState/ref. Der er ikke behov for deling — hold den lokal. Dette er det enkleste og mest almindelige tilfælde.
// 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>
);
}Løft tilstanden op
Når to søskendekomponenter har brug for den samme tilstand, skal du løfte den op til deres nærmeste fælles forfader. Send den ned som props og tilbagekald. Dette er standard i React/Vue, før du tager en global store i brug.
Delt kontekst — deling på mellemniveau
Når tilstanden skal deles på tværs af et komponentundertræ uden prop drilling, er Context (React) eller provide/inject (Vue) det rigtige værktøj. Dette er beregnet til deling inden for et moderat område (en side eller et funktionsmodul).
Global store — tilstand for hele applikationen
Brug en global store (Redux, Zustand, Pinia) til tilstand, der: 1) tilgås af mange uvedkommende komponenter, 2) skal overleve navigation, 3) har kompleks opdateringslogik, 4) drager fordel af inspektion i DevTools.
Eksempler: lokal tilstand
Lokal tilstand er velegnet til: værdier i formularfelter, åbnet/lukket-tilstand for værktøjstip, synlighed af modaler, svævetilstand, animationstilstand og indlæsningsindikatorer, der kun hører til i én komponent.
Eksempler: løftet tilstand
Løftet tilstand er velegnet til: et delt filter, som to søskendelister bruger, den valgte fane i en fanegruppe og formulardata, der deles mellem to trin.
Eksempler: kontekst / provide
Context er velegnet til: det aktuelle tema, den godkendte bruger, lokalitet/sprog og funktionsflag samt en notifikationsstak — altså ting, der bruges på mange niveauer, men opdateres sjældent.
Eksempler: global store
En global store er velegnet til: indkøbskurv, godkendelsestokens + brugerobjekt, notifikationskø (meddelelser vises som en toast overalt fra) og realtidsdata, som flere visninger viser samtidig.
Servertilstand kontra klienttilstand
Netværksdata (hentet fra en API) er en særlig kategori: servertilstand. Den kræver håndtering af indlæsning og fejl, cachelagring samt ugyldiggørelse. React Query / SWR / TanStack Query håndterer servertilstand, så din store kan fokusere på ægte klienttilstand.
Almindelig fejl: Alt i den globale store
Læg ikke al tilstand i den globale store "for en sikkerheds skyld". Lokal tilstand er billigere, enklere og nemmere at teste. Overdreven brug af global tilstand skaber koblinger mellem komponenter, der burde være uafhængige.
Beslutningsramme
Spørg: 1) Har andre komponenter brug for dette? Nej → lokal. 2) Har nærtstående søskendekomponenter brug for det? Ja → løft den op. 3) Har et komponentundertræ brug for det? Ja → context/provide. 4) Har mange uvedkommende komponenter brug for det, eller skal det kunne inspiceres i DevTools? Ja → global store.
Hurtigt tjek
Hvor bør du gemme åbnet/lukket-tilstanden for én accordion-komponent?
Opsummering: tilstandens placering
Princip: Hold tilstanden så tæt på forbrugerne som muligt. Lokal useState/ref til tilstand i én komponent. Løft tilstanden op ved deling mellem søskendekomponenter. Context/provide til deling i et komponentundertræ. Global store til tilstand for hele applikationen med komplekse opdateringer. Servertilstand (API-data) hører hjemme i React Query/SWR, ikke i den globale store.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Hvornår skal global eller lokal state bruges” gratis?
Ja — hele teksten til “Hvornår skal global eller lokal state bruges” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Hvornår skal global eller lokal state bruges”?
Anvend princippet om colocation: hold state så tæt på forbrugeren som muligt, og løft den kun, når flere uafhængige komponenter har brug for den. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Hvornår skal global eller lokal state bruges”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Redux Toolkit: createSlice og configureStore
- Zustand til letvægts-React-state
- Pinia til Vue: defineStore og storeToRefs
- Hvornår skal global eller lokal state bruges