React Academy · Lektion

Mönstret context selector

Implementera en enkel selector-hook som endast renderas om när en del av en context ändras.

Lektion 3 av 413 steg

Mönstret context selector är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 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 React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen implementerar ni en context selector-hook som prenumererar på endast en del av context-state, vilket förhindrar omrenderingar när orelaterade delar av context ändras.

Problemet med selectors

useContext orsakar omrendering när NÅGON del av context ändras. Om en komponent endast behöver användarens namn, men context även innehåller en lista med aviseringar, renderas namnkomponenten om i onödan när en avisering läggs till.

Vad är en selector?

En selector är en funktion som extraherar en specifik del av state från ett större state-objekt: `state => state.user.name`. En selector-hook prenumererar på context men utlöser endast en omrendering när det valda värdet ändras.

En enkel selector-hook

Bygg en useSelector-hook som läser context och omsluter resultatet i useMemo. Komponenten renderas endast om när det valda värdet ändras.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Kontroll av ytlig likhet

useMemo med en selector orsakar fortfarande omrendering om selectorn returnerar en ny objekt- eller arrayreferens vid varje anrop, till exempel `s => s.items.filter(...)`. Använd en jämförelse av ytlig likhet för att hoppa över omrenderingar när innehållet är detsamma.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

Biblioteket use-context-selector

För produktionsanvändning tillhandahåller biblioteket **use-context-selector** hooken `useContextSelector` med effektiv prenumeration och likhetskontroller — utan att externa state-hanterare behövs.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand som en selector-baserad lösning

Zustands hook `useStore(selector)` har inbyggt stöd för selectors och ytlig likhet direkt, vilket gör det till ett naturligt val för stora state-träd där detaljerade prenumerationer är viktiga.

const name = useAppStore(state => state.user.name);

När selectors är överdrivna

Om context uppdateras sällan och konsumenterna är billiga att rendera om tillför selectors komplexitet utan mätbar nytta. Profilera först — optimera alltid utifrån fakta.

Memoisera selector-funktioner

Om ni skapar selectorn direkt i komponentens body får den en ny funktionsreferens vid varje rendering, vilket kan bryta memoiseringen. Definiera selectors utanför komponenten eller använd useCallback.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Härledda selectors

Kombinera selectors genom att anropa en selector inifrån en annan. Härledda selectors beräknar värden från grundläggande selectors och håller affärslogiken utanför komponenterna.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Snabb kontroll

Varför bör selector-funktioner definieras utanför komponentens body när de används med useContextSelector eller useMemo?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Selectors extraherar en del av context-state och förhindrar omrenderingar när orelaterade delar ändras. Definiera selectors utanför komponenterna för att få stabila referenser. Använd use-context-selector eller Zustand för selector-stöd på produktionsnivå.

Nästa steg

Nästa lektion: **När Context inte bör användas** — ni lär er att känna igen när prop-överföring, komposition eller en state-hanterare passar bättre än Context.

Gratis att börja

Lär dig React 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: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Mönstret context selector” gratis?

Ja – hela texten till ”Mönstret context selector” 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 React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Mönstret context selector”?

Implementera en enkel selector-hook som endast renderas om när en del av en context ändras. Ni övar på React 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 React Academy?

Du behöver inga förkunskaper. Utbildningen i React 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 3 av 4.

Hur lång tid tar lektionen ”Mönstret context selector”?

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 React Academy-lektionen?

Ja. Varje React 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

Dela upp contexts för att begränsa omrenderingar
Memoisera context-värden med useMemo
Mönstret context selector
När context inte bör användas

← Tillbaka till React Academy