React useCallback: Funktionsmemoisering och beroendeoptimering

React är ett kraftfullt JavaScript-bibliotek för att bygga användargränssnitt, och det används flitigt av utvecklare över hela världen. En av de viktigaste aspekterna av att bygga effektiva React-applikationer är att hantera komponenters omritningar. Onödiga omritningar kan avsevärt påverka prestandan, särskilt i komplexa applikationer. React tillhandahåller verktyg som useCallback för att hjälpa utvecklare att optimera funktioners prestanda och kontrollera när funktioner återskapas, vilket därmed förbättrar applikationens övergripande effektivitet. Detta blogginlägg fördjupar sig i useCallback-hooken, förklarar dess syfte, fördelar och hur man effektivt använder den för att optimera dina React-komponenter.

Vad är useCallback?

useCallback är en React Hook som memoiserar en funktion. Memoisering är en prestandaoptimeringsteknik där resultaten av kostsamma funktionsanrop cachelagras, och efterföljande anrop till funktionen returnerar det cachelagrade resultatet om indatan inte har ändrats. I Reacts sammanhang hjälper useCallback till att förhindra onödigt återskapande av funktioner inom funktionella komponenter. Detta är särskilt användbart när man skickar funktioner som props till barnkomponenter.

Här är den grundläggande syntaxen:

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

            

              
                Copy
              
            
          

Låt oss gå igenom de viktigaste delarna:

• memoizedCallback: Detta är variabeln som kommer att hålla den memoiserade funktionen.
• useCallback: React-hooken.
• () => { ... }: Detta är funktionen du vill memoisera. Den innehåller logiken du vill exekvera.
• [dependency1, dependency2, ...]: Detta är en array av beroenden. Den memoiserade funktionen kommer bara att återskapas om något av beroendena ändras. Om beroendearrayen är tom ([]), kommer funktionen bara att skapas en gång under den initiala renderingen och förbli densamma för alla efterföljande renderingar.

Varför använda useCallback? Fördelarna

Att använda useCallback erbjuder flera fördelar för att optimera React-applikationer:

• Förhindra onödiga omritningar: Den primära fördelen är att förhindra att barnkomponenter ritas om i onödan. När en funktion skickas som en prop till en barnkomponent, kommer React att behandla den som en ny prop vid varje rendering om du inte memoiserar funktionen med useCallback. Om funktionen återskapas kan barnkomponenten ritas om även om dess andra props inte har ändrats. Detta kan vara en betydande prestandaflaskhals.
• Prestandaförbättring: Genom att förhindra omritningar förbättrar useCallback den övergripande prestandan i din applikation, särskilt i scenarier med föräldrakomponenter som ofta ritas om och komplexa barnkomponenter. Detta gäller särskilt i applikationer som hanterar stora datamängder eller frekventa användarinteraktioner.
• Optimera anpassade hooks: useCallback används ofta inom anpassade hooks för att memoisera funktioner som returneras av hooken. Detta säkerställer att funktionerna inte ändras om inte deras beroenden ändras, vilket hjälper till att förhindra onödiga omritningar i komponenter som använder dessa anpassade hooks.
• Förbättrad stabilitet och förutsägbarhet: Genom att kontrollera när funktioner skapas kan useCallback bidra till ett mer förutsägbart beteende i din applikation, vilket minskar risken för oväntade sidoeffekter orsakade av frekvent ändrade funktioner. Detta är användbart för felsökning och underhåll av applikationen.

Hur useCallback fungerar: En djupdykning

När useCallback anropas, kontrollerar React om några av beroendena i beroendearrayen har ändrats sedan den senaste renderingen. Om beroendena inte har ändrats, returnerar useCallback den memoiserade funktionen från den föregående renderingen. Om något av beroendena har ändrats, återskapar useCallback funktionen och returnerar den nya funktionen.

Tänk på det så här: Föreställ dig att du har en speciell typ av varuautomat som delar ut funktioner. Du ger maskinen en lista med ingredienser (beroenden). Om dessa ingredienser inte har ändrats, ger maskinen dig samma funktion som du fick förra gången. Om någon ingrediens ändras skapar maskinen en ny funktion.

Exempel:

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

function ChildComponent({ onClick }) {
  console.log('ChildComponent re-rendered');
  return (
    Klicka här
  );
}

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

  // Utan useCallback - detta skapar en ny funktion vid varje rendering!
  // const handleClick = () => {
  //   setCount(count + 1);
  // };

  // Med useCallback - funktionen återskapas endast när 'count' ändras
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 'count' är beroendet

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

      
Antal: {count}
      
       setCount(count+1)}>Öka förälderns antal
    
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

I detta exempel, utan useCallback, skulle handleClick vara en ny funktion vid varje rendering av ParentComponent. Detta skulle få ChildComponent att ritas om varje gång ParentComponent ritas om, även om klickhanteraren i sig inte ändrades. Med useCallback ändras handleClick endast när beroendena ändras. I det här fallet är beroendet count, vilket ändras när vi ökar räknaren.

När man ska använda useCallback: Bästa praxis

Även om useCallback kan vara ett kraftfullt verktyg, är det viktigt att använda det strategiskt för att undvika överoptimering och onödig komplexitet. Här är en guide för när och när man inte ska använda det:

• När du ska använda det:
• Skicka funktioner som props till memoiserade komponenter: Detta är det vanligaste och mest kritiska användningsfallet. Om du skickar en funktion som en prop till en komponent som är wrappad i React.memo (eller använder useMemo för memoisering), *måste* du använda useCallback för att förhindra att barnkomponenten ritas om i onödan. Detta är särskilt viktigt om barnkomponentens omritning är kostsam.
• Optimera anpassade hooks: Memoisera funktioner inom anpassade hooks för att förhindra att de återskapas om inte beroenden ändras.
• Prestandakritiska sektioner: I sektioner av din applikation där prestanda är absolut kritisk (t.ex. inom loopar som renderar många komponenter), kan användning av useCallback avsevärt förbättra effektiviteten.
• Funktioner som används i händelsehanterare som kan utlösa omritningar: Om en funktion som skickas till en händelsehanterare direkt påverkar tillståndsändringar som kan utlösa en omritning, hjälper useCallback till att säkerställa att funktionen inte återskapas och att komponenten därmed inte ritas om i onödan.
• När du INTE ska använda det:
• Enkla händelsehanterare: För enkla händelsehanterare som inte direkt påverkar prestandan eller interagerar med memoiserade barnkomponenter, kan användning av useCallback lägga till onödig komplexitet. Det är bäst att utvärdera den faktiska påverkan innan du använder det.
• Funktioner som inte skickas som props: Om en funktion endast används inom en komponents räckvidd och inte skickas till en barnkomponent eller används på ett sätt som utlöser omritningar, finns det vanligtvis inget behov av att memoisera den.
• Överanvändning: Att överanvända useCallback kan leda till kod som är svårare att läsa och förstå. Överväg alltid avvägningen mellan prestandafördelar och kodläsbarhet. Att profilera din applikation för att hitta verkliga prestandaflaskhalsar är ofta det första steget.

Förstå beroenden

Beroendearrayen är avgörande för hur useCallback fungerar. Den talar om för React när den memoiserade funktionen ska återskapas. Att felaktigt specificera beroenden kan leda till oväntat beteende eller till och med buggar.

• Inkludera alla beroenden: Se till att inkludera *alla* variabler som används inuti den memoiserade funktionen i beroendearrayen. Detta inkluderar tillståndsvariabler, props och alla andra värden som funktionen är beroende av. Saknade beroenden kan leda till "stale closures", där funktionen använder föråldrade värden, vilket orsakar oförutsägbara resultat. Reacts linter kommer ofta att varna dig för saknade beroenden.
• Undvik onödiga beroenden: Inkludera inte beroenden som funktionen faktiskt inte använder. Detta kan leda till onödigt återskapande av funktionen.
• Beroenden och tillståndsuppdateringar: När ett beroende ändras, återskapas den memoiserade funktionen. Se till att du förstår hur dina tillståndsuppdateringar fungerar och hur de relaterar till dina beroenden.
• Exempel:

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

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

  const handleClick = useCallback(() => {
    // Inkludera alla beroenden: prop1 och stateValue
    console.log('prop1: ', prop1, 'stateValue: ', stateValue);
    setStateValue(stateValue + 1);
  }, [prop1, stateValue]);  // Korrekt beroendearray

  return Klicka här;
}

            

              
                Copy
              
            
          

I detta exempel, om du skulle utelämna prop1 från beroendearrayen, skulle funktionen alltid använda det initiala värdet av prop1, vilket troligen inte är vad du vill.

useCallback vs. useMemo: Vad är skillnaden?

Både useCallback och useMemo är React Hooks som används för memoisering, men de tjänar olika syften:

• useCallback: Returnerar en memoiserad *funktion*. Den används för att optimera funktioner genom att förhindra att de återskapas om inte deras beroenden ändras. Främst avsedd för prestandaoptimering relaterad till funktionsreferenser och omritningar av barnkomponenter.
• useMemo: Returnerar ett memoiserat *värde*. Den används för att memoisera resultatet av en beräkning. Detta kan användas för att undvika att köra om kostsamma beräkningar vid varje rendering, särskilt de vars utdata inte behöver vara en funktion.

När du ska välja:

• Använd useCallback när du vill memoisera en funktion.
• Använd useMemo när du vill memoisera ett beräknat värde (som ett objekt, en array eller ett primitivt värde).

Exempel med useMemo:

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

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

  // Memoisera de filtrerade objekten - en array är resultatet
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)} />
      

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

            

              
                Copy
              
            
          

I detta exempel memoiserar useMemo arrayen filteredItems, vilket är resultatet av filtreringsoperationen. Den beräknar bara om arrayen när antingen items eller filter ändras. Detta förhindrar att listan ritas om i onödan när andra delar av komponenten ändras.

React.memo och useCallback: En kraftfull kombination

React.memo är en högre ordningens komponent (HOC) som memoiserar en funktionell komponent. Den förhindrar omritningar av komponenten om dess props inte har ändrats. I kombination med useCallback får du kraftfulla optimeringsmöjligheter.

• Hur det fungerar: React.memo utför en ytlig jämförelse av de props som skickas till en komponent. Om propsen är desamma (enligt en ytlig jämförelse), kommer komponenten inte att ritas om. Det är här useCallback kommer in: genom att memoisera funktionerna som skickas som props, säkerställer du att funktionerna inte ändras om inte beroendena ändras. Detta gör att React.memo effektivt kan förhindra omritningar av den memoiserade komponenten.
• Exempel:

            
import React, { useCallback } from 'react';

// Memoiserad barnkomponent
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 (
    

      
Antal: {count}
      
       setCount(count+1)}>Öka förälderns antal
    
  );
}

            

              
                Copy
              
            
          

I detta exempel är ChildComponent memoiserad med React.memo. Propen onClick är memoiserad med useCallback. Denna uppsättning säkerställer att ChildComponent endast ritas om när själva handleClick-funktionen återskapas (vilket bara händer när count ändras), och när text-propen ändras.

Avancerade tekniker och överväganden

Utöver grunderna finns det några avancerade tekniker och överväganden att tänka på när man använder useCallback:

• Anpassad jämförelselogik med React.memo: Medan React.memo utför en ytlig jämförelse av props som standard, kan du ange ett andra argument, en jämförelsefunktion, för att anpassa prop-jämförelsen. Detta möjliggör mer finkornig kontroll över när en komponent ritas om. Detta är användbart om dina props är komplexa objekt som kräver en djup jämförelse.
• Profilerings- och prestandaverktyg: Använd React DevTools och webbläsarens profileringsverktyg för att identifiera prestandaflaskhalsar i din applikation. Detta kan hjälpa dig att peka ut områden där useCallback och andra optimeringstekniker kan ge störst nytta. Verktyg som React Profiler i Chrome DevTools kan visuellt visa dig vilka komponenter som ritas om och varför.
• Undvik för tidig optimering: Börja inte använda useCallback överallt i din applikation. Profilera först din applikation för att identifiera prestandaflaskhalsar. Sedan, fokusera på att optimera de komponenter som orsakar mest problem. För tidig optimering kan leda till mer komplex kod utan betydande prestandavinster.
• Överväg alternativ: I vissa fall kan andra tekniker som "code splitting", "lazy loading" och virtualisering vara mer lämpliga för att förbättra prestandan än att använda useCallback. Tänk på den övergripande arkitekturen i din applikation när du fattar optimeringsbeslut.
• Uppdatera beroenden: När ett beroende ändras, återskapas den memoiserade funktionen. Detta kan leda till prestandaproblem om funktionen utför kostsamma operationer. Överväg noggrant effekten av dina beroenden och hur ofta de ändras. Ibland kan det vara mer effektivt att omvärdera din komponentdesign eller använda ett annat tillvägagångssätt.

Verkliga exempel och globala tillämpningar

useCallback används i stor utsträckning i React-applikationer av alla storlekar, från små personliga projekt till storskaliga företagsapplikationer. Här är några verkliga scenarier och hur useCallback tillämpas:

• E-handelsplattformar: I e-handelsapplikationer kan useCallback användas för att optimera prestandan hos produktlistningskomponenter. När en användare interagerar med produktlistan (t.ex. filtrering, sortering), måste omritningar vara effektiva för att bibehålla en smidig användarupplevelse. Att memoisera händelsehanterarfunktioner (som att lägga till en vara i varukorgen) som skickas till barnkomponenter säkerställer att dessa komponenter inte ritas om i onödan.
• Sociala medie-applikationer: Plattformar för sociala medier har ofta komplexa användargränssnitt med många komponenter. useCallback kan optimera komponenter som visar användarflöden, kommentarsfält och andra interaktiva element. Föreställ dig en komponent som visar en lista med kommentarer. Genom att memoisera funktionen `likeComment` kan du förhindra att hela kommentarslistan ritas om varje gång en användare gillar en kommentar.
• Interaktiv datavisualisering: I applikationer som visar stora datamängder och visualiseringar, kan useCallback vara ett nyckelverktyg för att bibehålla responsiviteten. Att optimera prestandan hos händelsehanterare som används för att interagera med visualiseringen (t.ex. zoomning, panorering, val av datapunkter) förhindrar omritning av komponenter som inte direkt påverkas av interaktionen. Till exempel i finansiella instrumentpaneler eller verktyg för vetenskaplig dataanalys.
• Internationella applikationer (lokalisering och globalisering): I applikationer som stöder flera språk (t.ex. översättningsappar eller plattformar med internationella användarbaser), kan useCallback användas tillsammans med lokaliseringsbibliotek för att förhindra onödiga omritningar när språket ändras. Genom att memoisera funktioner relaterade till att hämta översatta strängar eller formatera datum och siffror, kan du säkerställa att endast de påverkade komponenterna uppdateras när språket ändras. Tänk på en global bankapplikation som visar kontosaldon i olika valutor. Om valutan ändras vill du bara rita om komponenten som visar saldot i den nya valutan, och inte hela applikationen.
• System för användarautentisering och auktorisering: Applikationer med användarautentisering (över alla typer av länder, från USA till Indien till Japan, och många fler!) använder ofta komponenter som hanterar användarsessioner och roller. Att använda useCallback för att memoisera funktioner relaterade till inloggning, utloggning och uppdatering av användarbehörigheter säkerställer att gränssnittet svarar effektivt. När en användare loggar in eller deras roll ändras behöver endast de påverkade komponenterna ritas om.

Slutsats: Bemästra useCallback för effektiv React-utveckling

useCallback är ett viktigt verktyg för React-utvecklare som vill optimera sina applikationer. Genom att förstå dess syfte, fördelar och hur man använder det effektivt, kan du avsevärt förbättra prestandan hos dina komponenter, minska onödiga omritningar och skapa en smidigare användarupplevelse. Kom ihåg att använda det strategiskt, profilera din applikation för att identifiera flaskhalsar och kombinera det med andra optimeringstekniker som React.memo och useMemo för att bygga effektiva och underhållbara React-applikationer.

Genom att följa de bästa metoderna och exemplen som beskrivs i detta blogginlägg, kommer du att vara väl rustad för att utnyttja kraften i useCallback och skriva högpresterande React-applikationer för en global publik.