React Academy · leksjon

Velge riktig plassering av state

Bruk et beslutningsrammeverk: lokal state, løftet state eller global state.

Leksjon 4 av 413 trinn

Velge riktig plassering av state er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen lærer De et praktisk beslutningsrammeverk for å avgjøre om tilstanden hører hjemme i én enkelt komponent, en felles forfader, React Context eller et globalt tilstandsbibliotek.

Trinn 1: Hvem bruker denne tilstanden?

Start med å spørre: Hvilke komponenter renderer ved hjelp av denne tilstanden? List dem opp. Hvis bare én komponent bruker den, bør tilstanden være lokal i denne komponenten.

Lokal tilstand

Tilstand som brukes av nøyaktig én komponent, hører hjemme i den komponenten sammen med useState. Eksempler er om en nedtrekksliste er åpen, gjeldende verdi i et kontrollert inndatafelt og om et verktøytips er synlig.

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Trinn 2: Finn den felles forfaderen

Hvis flere komponenter trenger tilstanden, finner De den nærmeste felles forfaderen i komponenttreet. Flytt tilstanden dit, og send den nedover som props.

Løftet tilstand (2–3 nivåer)

Tilstand som deles av 2–3 komponenter på omtrent samme nestingsnivå, egner seg godt til å løftes. Den felles forelderen eier tilstanden og sender den nedover gjennom props.

Trinn 3: Er prop-drillingen for dyp?

Hvis den felles forfaderen ligger 4 eller flere nivåer over komponentene som bruker tilstanden, skaper det unødvendig støy å sende props gjennom mellomliggende komponenter. Vurder Context.

Context-tilstand

Bruk Context for tverrgående behov som mange komponenter i komponenttreet trenger: den gjeldende innloggede brukeren, det aktive temaet eller det valgte språket. Disse endres sjelden og har mange brukere.

Trinn 4: Er tilstanden kompleks eller delt på tvers av sider?

Hvis tilstanden har kompleks oppdateringslogikk, trenger angre/gjør om, må bevares under navigering, eller brukes i helt separate komponenttrær, bør De bruke et dedikert tilstandsbibliotek (Zustand, Redux).

Servertilstand er annerledes

Data som hentes fra en server, er *servertilstand*, ikke UI-tilstand. Ikke lagre den i useState eller en global store — bruk React Query, SWR eller RTK Query, som håndterer bufring, ny henting og feiltilstander automatisk.

Beslutningsflytskjemaet

1 bruker → lokal useState. 2–3 brukere på omtrent samme nivå → løft til forelderen. 4 eller flere nivåer med prop-drilling → Context. Kompleks logikk eller deling på tvers av trær → Zustand/Redux. Serverdata → React Query/SWR.

Hurtigsjekk

Hvilken plassering av tilstanden passer best for den gjeldende innloggede brukeren, som mange komponenter i en stor app trenger tilgang til?

Besvar den i den interaktive leksjonen

Oppsummering

Tilpass plasseringen av tilstanden til brukerne: lokal for én, løftet for noen få komponenter i nærheten, Context for mange komponenter på tvers av nivåer, et tilstandsbibliotek for kompleks tilstand eller tilstand på tvers av trær, og React Query for serverdata.

Kurset er fullført

Gratulerer! De har fullført **Løfting av tilstand og løsninger på prop-drilling**. De har nå et tydelig rammeverk for å avgjøre hvor tilstanden skal ligge, og hvordan den skal deles på riktig måte.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Velge riktig plassering av state» gratis?

Ja – hele teksten i «Velge riktig plassering av state» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Velge riktig plassering av state»?

Bruk et beslutningsrammeverk: lokal state, løftet state eller global state. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Velge riktig plassering av state»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Løfte state opp: Prinsipper og eksempler
Prop drilling: Når det skaper problemer og når det er greit
Mønstre for kommunikasjon mellom søsken
Velge riktig plassering av state

← Tilbake til React Academy