React useCallback: Funksjonsmemoisering og optimalisering av avhengigheter

React er et kraftig JavaScript-bibliotek for å bygge brukergrensesnitt, og det er mye brukt av utviklere over hele verden. Et av de viktigste aspektene ved å bygge effektive React-applikasjoner er å håndtere komponenters re-rendringer. Unødvendige re-rendringer kan påvirke ytelsen betydelig, spesielt i komplekse applikasjoner. React tilbyr verktøy som useCallback for å hjelpe utviklere med å optimalisere funksjonsytelse og kontrollere når funksjoner opprettes på nytt, og dermed forbedre den generelle effektiviteten til applikasjonen. Dette blogginnlegget dykker ned i useCallback-hooken, forklarer formålet, fordelene og hvordan man effektivt bruker den for å optimalisere React-komponentene dine.

Hva er useCallback?

useCallback er en React Hook som memoizerer en funksjon. Memoisering er en teknikk for ytelsesoptimalisering der resultatene av kostbare funksjonskall blir bufret, og påfølgende kall til funksjonen returnerer det bufrede resultatet hvis inputen ikke har endret seg. I konteksten av React hjelper useCallback med å forhindre unødvendig gjenoppretting av funksjoner i funksjonelle komponenter. Dette er spesielt nyttig når man sender funksjoner som props til barnekomponenter.

Her er den grunnleggende syntaksen:

            
const memoizedCallback = useCallback(
  () => {
    // Funksjonslogikk
  },
  [dependency1, dependency2, ...]
);

            

              
                Copy
              
            
          

La oss bryte ned de viktigste delene:

• memoizedCallback: Dette er variabelen som vil inneholde den memoiserte funksjonen.
• useCallback: React Hook-en.
• () => { ... }: Dette er funksjonen du vil memoizere. Den inneholder logikken du vil utføre.
• [dependency1, dependency2, ...]: Dette er en matrise med avhengigheter. Den memoiserte funksjonen vil bare bli opprettet på nytt hvis noen av avhengighetene endres. Hvis avhengighetsmatrisen er tom ([]), vil funksjonen bare bli opprettet én gang under den første rendringen og vil forbli den samme for alle påfølgende rendringer.

Hvorfor bruke useCallback? Fordelene

Å bruke useCallback gir flere fordeler for optimalisering av React-applikasjoner:

• Forhindre unødvendige re-rendringer: Den primære fordelen er å forhindre at barnekomponenter re-rendres unødvendig. Når en funksjon sendes som en prop til en barnekomponent, vil React behandle den som en ny prop ved hver rendring med mindre du memoizerer funksjonen med useCallback. Hvis funksjonen opprettes på nytt, kan barnekomponenten re-rendre selv om de andre prop-ene ikke har endret seg. Dette kan være en betydelig ytelsesflaskehals.
• Ytelsesforbedring: Ved å forhindre re-rendringer, forbedrer useCallback den generelle ytelsen til applikasjonen din, spesielt i scenarier med hyppig re-rendrende foreldrekomponenter og komplekse barnekomponenter. Dette gjelder spesielt i applikasjoner som håndterer store datasett eller hyppige brukerinteraksjoner.
• Optimalisering av egendefinerte Hooks: useCallback brukes ofte i egendefinerte hooks for å memoizere funksjoner som returneres av hook-en. Dette sikrer at funksjonene ikke endres med mindre avhengighetene deres endres, noe som bidrar til å forhindre unødvendige re-rendringer i komponenter som bruker disse egendefinerte hooksene.
• Forbedret stabilitet og forutsigbarhet: Ved å kontrollere når funksjoner opprettes, kan useCallback bidra til mer forutsigbar oppførsel i applikasjonen din, og redusere sjansene for uventede bivirkninger forårsaket av hyppig endrede funksjoner. Dette er nyttig for feilsøking og vedlikehold av applikasjonen.

Hvordan useCallback fungerer: Et dypdykk

Når useCallback kalles, sjekker React om noen av avhengighetene i avhengighetsmatrisen har endret seg siden forrige rendring. Hvis avhengighetene ikke har endret seg, returnerer useCallback den memoiserte funksjonen fra forrige rendring. Hvis noen av avhengighetene har endret seg, oppretter useCallback funksjonen på nytt og returnerer den nye funksjonen.

Tenk på det slik: Se for deg at du har en spesiell type salgsautomat som gir ut funksjoner. Du gir maskinen en liste over ingredienser (avhengigheter). Hvis disse ingrediensene ikke har endret seg, gir maskinen deg den samme funksjonen du fikk sist. Hvis en ingrediens endres, lager maskinen en ny funksjon.

Eksempel:

            
import React, { useCallback, useState } from 'react';

function ChildComponent({ onClick }) {
  console.log('ChildComponent re-rendered');
  return (
    Klikk på meg
  );
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Uten useCallback - dette vil opprette en ny funksjon ved hver rendring!
  // const handleClick = () => {
  //   setCount(count + 1);
  // };

  // Med useCallback - funksjonen opprettes kun på nytt når 'count' endres
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 'count' er avhengigheten

  console.log('ParentComponent re-rendered');
  return (
    

      
Antall: {count}
      
       setCount(count+1)}>Øk foreldres antall
    
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

I dette eksempelet, uten useCallback, ville handleClick vært en ny funksjon ved hver rendring av ParentComponent. Dette ville ført til at ChildComponent re-rendret hver gang ParentComponent re-rendrer, selv om klikk-håndtereren i seg selv ikke endret seg. Med useCallback endres handleClick kun når avhengighetene endres. I dette tilfellet er avhengigheten count, som endres når vi øker telleren.

Når bør man bruke useCallback: Beste praksis

Selv om useCallback kan være et kraftig verktøy, er det viktig å bruke det strategisk for å unngå overoptimalisering og unødvendig kompleksitet. Her er en veiledning til når og når man ikke bør bruke den:

• Når man bør bruke:
• Sende funksjoner som props til memoiserte komponenter: Dette er det vanligste og mest kritiske bruksområdet. Hvis du sender en funksjon som en prop til en komponent wrappet i React.memo (eller som bruker useMemo for memoisering), *må* du bruke useCallback for å forhindre at barnekomponenten re-rendrer unødvendig. Dette er spesielt viktig hvis barnekomponentens re-rendring er kostbar.
• Optimalisering av egendefinerte Hooks: Memoisere funksjoner i egendefinerte hooks for å forhindre at de opprettes på nytt med mindre avhengighetene endres.
• Ytelseskritiske seksjoner: I deler av applikasjonen der ytelse er absolutt kritisk (f.eks. i løkker som rendrer mange komponenter), kan bruk av useCallback forbedre effektiviteten betydelig.
• Funksjoner brukt i hendelseshåndterere som kan utløse re-rendringer: Hvis en funksjon sendt til en hendelseshåndterer direkte påvirker tilstandsendringer som kan utløse en re-rendring, hjelper useCallback med å sikre at funksjonen ikke opprettes på nytt, og at komponenten følgelig ikke re-rendres unødvendig.
• Når man IKKE bør bruke:
• Enkle hendelseshåndterere: For enkle hendelseshåndterere som ikke direkte påvirker ytelsen eller samhandler med memoiserte barnekomponenter, kan useCallback tilføre unødvendig kompleksitet. Det er best å evaluere den faktiske innvirkningen før du bruker den.
• Funksjoner som ikke sendes som props: Hvis en funksjon kun brukes innenfor en komponents virkeområde og ikke sendes til en barnekomponent eller brukes på en måte som utløser re-rendringer, er det vanligvis ikke nødvendig å memoizere den.
• Overforbruk: Overdreven bruk av useCallback kan føre til kode som er vanskeligere å lese og forstå. Vurder alltid avveiningen mellom ytelsesfordeler og kodens lesbarhet. Å profilere applikasjonen for å finne reelle ytelsesflaskehalser er ofte det første steget.

Forståelse av avhengigheter

Avhengighetsmatrisen er avgjørende for hvordan useCallback fungerer. Den forteller React når den memoiserte funksjonen skal opprettes på nytt. Feilaktig spesifisering av avhengigheter kan føre til uventet oppførsel eller til og med feil.

• Inkluder alle avhengigheter: Sørg for å inkludere *alle* variabler som brukes inne i den memoiserte funksjonen i avhengighetsmatrisen. Dette inkluderer tilstandsvariabler, props og alle andre verdier funksjonen er avhengig av. Manglende avhengigheter kan føre til 'stale closures', der funksjonen bruker utdaterte verdier, noe som forårsaker uforutsigbare resultater. Reacts linter vil ofte advare deg om manglende avhengigheter.
• Unngå unødvendige avhengigheter: Ikke inkluder avhengigheter som funksjonen faktisk ikke bruker. Dette kan føre til unødvendig gjenoppretting av funksjonen.
• Avhengigheter og tilstandsoppdateringer: Når en avhengighet endres, blir den memoiserte funksjonen opprettet på nytt. Sørg for at du forstår hvordan tilstandsoppdateringene dine fungerer og hvordan de forholder seg til avhengighetene dine.
• Eksempel:

            
import React, { useCallback, useState } from 'react';

function MyComponent({ prop1 }) {
  const [stateValue, setStateValue] = useState(0);

  const handleClick = useCallback(() => {
    // Inkluder alle avhengigheter: prop1 og stateValue
    console.log('prop1: ', prop1, 'stateValue: ', stateValue);
    setStateValue(stateValue + 1);
  }, [prop1, stateValue]);  // Korrekt avhengighetsmatrise

  return Klikk på meg;
}

            

              
                Copy
              
            
          

I dette eksempelet, hvis du skulle utelate prop1 fra avhengighetsmatrisen, ville funksjonen alltid bruke den opprinnelige verdien av prop1, noe som sannsynligvis ikke er det du ønsker.

useCallback vs. useMemo: Hva er forskjellen?

Både useCallback og useMemo er React Hooks som brukes for memoisering, men de tjener forskjellige formål:

• useCallback: Returnerer en memoizert *funksjon*. Den brukes til å optimalisere funksjoner ved å forhindre at de opprettes på nytt med mindre avhengighetene endres. Primært designet for ytelsesoptimalisering relatert til funksjonsreferanser og re-rendringer av barnekomponenter.
• useMemo: Returnerer en memoizert *verdi*. Den brukes til å moisere resultatet av en beregning. Dette kan brukes for å unngå å kjøre kostbare beregninger på nytt ved hver rendring, spesielt de hvis resultat ikke trenger å være en funksjon.

Når man bør velge:

• Bruk useCallback når du vil memoizere en funksjon.
• Bruk useMemo når du vil memoizere en beregnet verdi (som et objekt, en matrise eller en primitiv verdi).

Eksempel med useMemo:

            
import React, { useMemo, useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  // Memoiser de filtrerte elementene - en matrise er resultatet
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)} />
      

        {filteredItems.map(item => (
          
{item}
        ))}
      
    
  );
}

            

              
                Copy
              
            
          

I dette eksempelet memoizerer useMemo filteredItems-matrisen, som er resultatet av filtreringsoperasjonen. Den beregner bare matrisen på nytt når enten items eller filter endres. Dette forhindrer at listen re-rendres unødvendig når andre deler av komponenten endres.

React.memo og useCallback: En kraftig kombinasjon

React.memo er en høyere-ordens komponent (HOC) som memoizerer en funksjonell komponent. Den forhindrer re-rendringer av komponenten hvis dens props ikke har endret seg. Når den kombineres med useCallback, får du kraftige optimaliseringsmuligheter.

• Hvordan det fungerer: React.memo utfører en grunn sammenligning av prop-ene som sendes til en komponent. Hvis prop-ene er de samme (ifølge en grunn sammenligning), vil ikke komponenten re-rendre. Det er her useCallback kommer inn: ved å memoizere funksjonene som sendes som props, sikrer du at funksjonene ikke endres med mindre avhengighetene endres. Dette lar React.memo effektivt forhindre re-rendringer av den memoiserte komponenten.
• Eksempel:

            
import React, { useCallback } from 'react';

// Memoisert barnekomponent
const ChildComponent = React.memo(({ onClick, text }) => {
  console.log('ChildComponent re-rendered');
  return (
    {text}
  );
});

function ParentComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    

      
Antall: {count}
      
       setCount(count+1)}>Øk foreldres antall
    
  );
}

            

              
                Copy
              
            
          

I dette eksempelet er ChildComponent memoisert med React.memo. onClick-propen er memoisert med useCallback. Dette oppsettet sikrer at ChildComponent kun re-rendrer når selve handleClick-funksjonen opprettes på nytt (noe som bare skjer når count endres), og når text-propen endres.

Avanserte teknikker og betraktninger

Utover det grunnleggende, er det noen avanserte teknikker og betraktninger å huske på når du bruker useCallback:

• Egendefinert sammenligningslogikk med React.memo: Mens React.memo utfører en grunn sammenligning av props som standard, kan du gi et andre argument, en sammenligningsfunksjon, for å tilpasse prop-sammenligningen. Dette gir mer finkornet kontroll over når en komponent re-rendrer. Dette er nyttig hvis dine props er komplekse objekter som krever en dyp sammenligning.
• Profilerings- og ytelsesverktøy: Bruk React DevTools og nettleserens profileringsverktøy for å identifisere ytelsesflaskehalser i applikasjonen din. Dette kan hjelpe deg med å finne områder der useCallback og andre optimaliseringsteknikker kan gi størst nytte. Verktøy som React Profiler i Chrome DevTools kan visuelt vise deg hvilke komponenter som re-rendrer og hvorfor.
• Unngå prematur optimalisering: Ikke begynn å bruke useCallback overalt i applikasjonen din. Først, profiler applikasjonen for å identifisere ytelsesflaskehalser. Fokuser deretter på å optimalisere komponentene som forårsaker flest problemer. Prematur optimalisering kan føre til mer kompleks kode uten betydelige ytelsesgevinster.
• Vurder alternativer: I noen tilfeller kan andre teknikker som kodedeling, lat lasting og virtualisering være mer passende for å forbedre ytelsen enn å bruke useCallback. Vurder den overordnede arkitekturen til applikasjonen din når du tar optimaliseringsbeslutninger.
• Oppdatering av avhengigheter: Når en avhengighet endres, blir den memoiserte funksjonen gjenopprettet. Dette kan føre til ytelsesproblemer hvis funksjonen utfører kostbare operasjoner. Vurder nøye virkningen av avhengighetene dine og hvor ofte de endres. Noen ganger kan det være mer effektivt å revurdere komponentdesignet eller bruke en annen tilnærming.

Eksempler fra den virkelige verden og globale applikasjoner

useCallback brukes i stor utstrekning i React-applikasjoner av alle størrelser, fra små personlige prosjekter til store bedriftsapplikasjoner. Her er noen scenarier fra den virkelige verden og hvordan useCallback brukes:

• E-handelsplattformer: I e-handelsapplikasjoner kan useCallback brukes til å optimalisere ytelsen til produktlistekomponenter. Når en bruker samhandler med produktlisten (f.eks. filtrering, sortering), må re-rendringer være effektive for å opprettholde en jevn brukeropplevelse. Memoisering av hendelseshåndteringsfunksjoner (som å legge en vare i handlekurven) som sendes til barnekomponenter, sikrer at disse komponentene ikke re-rendres unødvendig.
• Sosiale medier-applikasjoner: Sosiale medieplattformer har ofte komplekse brukergrensesnitt med mange komponenter. useCallback kan optimalisere komponenter som viser brukerfeeder, kommentarfelt og andre interaktive elementer. Se for deg en komponent som viser en liste over kommentarer. Ved å memoizere `likeComment`-funksjonen kan du forhindre at hele kommentarfeltet re-rendres hver gang en bruker liker en kommentar.
• Interaktiv datavisualisering: I applikasjoner som viser store datasett og visualiseringer, kan useCallback være et nøkkelverktøy for å opprettholde responsivitet. Optimalisering av ytelsen til hendelseshåndterere som brukes til å samhandle med visualiseringen (f.eks. zooming, panorering, valg av datapunkter) forhindrer re-rendring av komponenter som ikke er direkte påvirket av interaksjonen. For eksempel i finansielle dashbord eller vitenskapelige dataanalyseverktøy.
• Internasjonale applikasjoner (Lokalisering og globalisering): I applikasjoner som støtter flere språk (f.eks. oversettelsesapper eller plattformer med internasjonale brukerbaser), kan useCallback brukes sammen med lokaliseringsbiblioteker for å forhindre unødvendige re-rendringer når språket endres. Ved å memoizere funksjoner relatert til henting av oversatte strenger eller formatering av datoer og tall, kan du sikre at bare de berørte komponentene oppdateres når lokaliteten endres. Tenk på en global bankapplikasjon som viser kontosaldoer i forskjellige valutaer. Hvis valutaen endres, vil du bare re-rendre komponenten som viser saldoen i den nye valutaen, og ikke hele applikasjonen.
• Brukerautentiserings- og autorisasjonssystemer: Applikasjoner med brukerautentisering (på tvers av alle typer land, fra USA til India til Japan, og mange flere!) bruker ofte komponenter som administrerer brukerøkter og roller. Ved å bruke useCallback for å memoizere funksjoner relatert til innlogging, utlogging og oppdatering av brukertillatelser, sikres det at brukergrensesnittet reagerer effektivt. Når en bruker logger inn eller rollen deres endres, trenger bare de berørte komponentene å re-rendre.

Konklusjon: Mestre useCallback for effektiv React-utvikling

useCallback er et viktig verktøy for React-utviklere som ønsker å optimalisere applikasjonene sine. Ved å forstå formålet, fordelene og hvordan du bruker det effektivt, kan du forbedre ytelsen til komponentene dine betydelig, redusere unødvendige re-rendringer og skape en jevnere brukeropplevelse. Husk å bruke det strategisk, profilere applikasjonen din for å identifisere flaskehalser, og kombinere det med andre optimaliseringsteknikker som React.memo og useMemo for å bygge effektive og vedlikeholdbare React-applikasjoner.

Ved å følge de beste praksisene og eksemplene som er beskrevet i dette blogginnlegget, vil du være godt rustet til å utnytte kraften i useCallback og skrive høytytende React-applikasjoner for et globalt publikum.