React Academy · Lektion

Dela upp contexts för att begränsa omrenderingar

Separera värden som ändras ofta från stabila värden genom att placera dem i olika contexts.

Lektion 1 av 413 steg

Dela upp contexts för att begränsa omrenderingar är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 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 lär ni er att dela upp React Context i separata providers för att minimera omrenderingar när endast en del av context-värdet ändras.

Problemet med omrendering i Context

Varje komponent som anropar useContext(MyCtx) renderas om när NÅGON del av context-värdet ändras — även om den del som komponenten använder inte ändrades. Ett enda stort context kan orsaka många onödiga omrenderingar.

Dela upp efter uppdateringsfrekvens

Separera värden som ändras ofta från värden som sällan ändras. Placera varje grupp i sitt eget context. Konsumenterna prenumererar endast på det context de behöver.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Separata data- och dispatch-context

Ett vanligt mönster är att dela upp ett context för state-data, som renderas om vid varje ändring, och ett annat för dispatch-/setter-funktioner, som är stabila och aldrig orsakar omrendering av konsumenterna. Konsumenter som endast använder dispatch renderas aldrig om när data ändras.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memoisera dispatch-contextet

Setters från useState är stabila och har samma referens vid varje rendering, så dispatch-contextets värde ändras inte. Om ni beräknar ett objekt med actions bör ni däremot omsluta det i useMemo.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Kapslade providers

Kapsla flera providers i komponentträdet. Konsumenterna importerar och använder endast det specifika context de behöver, vilket håller prenumerationerna snäva.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Profilera före uppdelning

Profilera alltid med React DevTools innan ni delar upp context. Onödiga omrenderingar är bara ett problem om de är kostsamma. Överkonstruera inte context som är snabba att rendera om.

Kompromisser vid uppdelning av Context

Fler context innebär fler providers i komponentträdet. Det ökar den kognitiva belastningen. Dela endast upp context när profilering visar ett prestandaproblem, inte i förebyggande syfte.

Kombinera med React.memo

Även med ett enda context innebär React.memo på kostsamma underordnade komponenter att de endast renderas om när deras props ändras — inte när context ändras. Det kan vara ett enklare alternativ till uppdelning.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Kombinera useReducer med context för att hantera komplext state. Spara state i ett context och dispatch-funktionen i ett annat. Dispatch är stabilt, medan state uppdateras vid varje action.

Snabb kontroll

Varför förbättrar det prestandan att dela upp state och dispatch i separata context?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Dela upp context efter uppdateringsfrekvens: state som ändras ofta i ett context och stabila dispatch-/setter-funktioner i ett annat. Profilera först, dela endast upp när det gör skillnad och överväg React.memo som ett enklare alternativ.

Nästa steg

Nästa lektion: **Memoisera Context-värden med useMemo** — ni omsluter context-värdeobjekt i useMemo så att konsumenterna inte renderas om när data är oförändrade.

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 ”Dela upp contexts för att begränsa omrenderingar” gratis?

Ja – hela texten till ”Dela upp contexts för att begränsa omrenderingar” 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 ”Dela upp contexts för att begränsa omrenderingar”?

Separera värden som ändras ofta från stabila värden genom att placera dem i olika contexts. 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 1 av 4.

Hur lång tid tar lektionen ”Dela upp contexts för att begränsa omrenderingar”?

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