Optimizacija performansi u Reactu: Savladavanje useMemo, useCallback i React.memo

React, popularna JavaScript biblioteka za izradu korisničkih sučelja, poznata je po svojoj arhitekturi baziranoj na komponentama i deklarativnom stilu. Međutim, kako aplikacije rastu u složenosti, performanse mogu postati problem. Nepotrebna ponovna renderiranja komponenti mogu dovesti do sporih performansi i lošeg korisničkog iskustva. Srećom, React pruža nekoliko alata za optimizaciju performansi, uključujući useMemo, useCallback i React.memo. Ovaj vodič ulazi u ove tehnike, pružajući praktične primjere i korisne uvide koji će vam pomoći u izgradnji React aplikacija visokih performansi.

Razumijevanje ponovnog renderiranja u Reactu

Prije nego što zaronimo u tehnike optimizacije, ključno je razumjeti zašto se ponovna renderiranja događaju u Reactu. Kada se stanje ili svojstva komponente promijene, React pokreće ponovno renderiranje te komponente i, potencijalno, njezinih podređenih komponenti. React koristi virtualni DOM za učinkovito ažuriranje stvarnog DOM-a, ali pretjerana ponovna renderiranja i dalje mogu utjecati na performanse, posebno u složenim aplikacijama. Zamislite globalnu platformu za e-trgovinu gdje se cijene proizvoda često ažuriraju. Bez optimizacije, čak i mala promjena cijene može pokrenuti ponovna renderiranja u cijelom popisu proizvoda, što utječe na pregledavanje korisnika.

Zašto se komponente ponovno renderiraju

Promjene stanja: Kada se stanje komponente ažurira pomoću useState ili useReducer, React ponovno renderira komponentu.
Promjene svojstava: Ako komponenta primi nova svojstva od svoje nadređene komponente, ponovno će se renderirati.
Ponovna renderiranja nadređene komponente: Kada se nadređena komponenta ponovno renderira, njezine podređene komponente također će se ponovno renderirati prema zadanim postavkama, bez obzira jesu li se njihova svojstva promijenila.
Promjene konteksta: Komponente koje koriste React Context ponovno će se renderirati kada se vrijednost konteksta promijeni.

Cilj optimizacije performansi je spriječiti nepotrebna ponovna renderiranja, osiguravajući da se komponente ažuriraju samo kada su se njihovi podaci stvarno promijenili. Razmotrite scenarij koji uključuje vizualizaciju podataka u stvarnom vremenu za analizu tržišta dionica. Ako se komponente grafikona ponovno renderiraju nepotrebno sa svakim manjim ažuriranjem podataka, aplikacija će postati neodgovarajuća. Optimizacija ponovnih renderiranja osigurat će glatko i brzo korisničko iskustvo.

Predstavljamo useMemo: Memoiziranje skupih izračuna

useMemo je React hook koji memoizira rezultat izračuna. Memoizacija je tehnika optimizacije koja pohranjuje rezultate skupih poziva funkcija i ponovno ih koristi kada se ponovno pojave isti ulazi. To sprječava potrebu za ponovnim nepotrebnim izvršavanjem funkcije.

Kada koristiti useMemo

Skupi izračuni: Kada komponenta treba izvršiti računalno intenzivan izračun na temelju svojih svojstava ili stanja.
Referencijalna jednakost: Kada se vrijednost prosljeđuje kao svojstvo podređenoj komponenti koja se oslanja na referencijalnu jednakost kako bi utvrdila treba li se ponovno renderirati.

Kako useMemo radi

useMemo uzima dva argumenta:

Funkcija koja izvodi izračun.
Niz ovisnosti.

Funkcija se izvršava samo kada se promijeni jedna od ovisnosti u nizu. Inače, useMemo vraća prethodno memoiziranu vrijednost.

Primjer: Izračunavanje Fibonaccijevog niza

Fibonaccijev niz je klasičan primjer računalno intenzivnog izračuna. Napravimo komponentu koja izračunava n-ti Fibonaccijev broj pomoću useMemo.


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

function Fibonacci({ n }) {
  const fibonacciNumber = useMemo(() => {
    console.log('Izračunavanje Fibonaccijevog niza...'); // Pokazuje kada se izračun izvodi
    function calculateFibonacci(num) {
      if (num <= 1) {
        return num;
      }
      return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
    }
    return calculateFibonacci(n);
  }, [n]);

  return Fibonacci({n}) = {fibonacciNumber};
}

function App() {
  const [number, setNumber] = useState(5);

  return (
    
       setNumber(parseInt(e.target.value))}
      />
      
    
  );
}

export default App;

U ovom primjeru, funkcija calculateFibonacci se izvršava samo kada se svojstvo n promijeni. Bez useMemo, funkcija bi se izvršavala pri svakom ponovnom renderiranju komponente Fibonacci, čak i ako n ostane isti. Zamislite da se ovaj izračun događa na globalnoj financijskoj nadzornoj ploči - svaki pomak tržišta uzrokuje potpuno ponovno izračunavanje, što dovodi do značajnog kašnjenja. useMemo to sprječava.

Predstavljamo useCallback: Memoiziranje funkcija

useCallback je još jedan React hook koji memoizira funkcije. Sprječava stvaranje nove instance funkcije pri svakom renderiranju, što može biti posebno korisno pri prosljeđivanju povratnih poziva kao svojstava podređenim komponentama.

Kada koristiti useCallback

Prosljeđivanje povratnih poziva kao svojstava: Kada se funkcija prosljeđuje kao svojstvo podređenoj komponenti koja koristi React.memo ili shouldComponentUpdate za optimizaciju ponovnih renderiranja.
Rukovatelji događajima: Kada se definiraju funkcije rukovatelja događajima unutar komponente kako bi se spriječila nepotrebna ponovna renderiranja podređenih komponenti.

Kako useCallback radi

useCallback uzima dva argumenta:

Funkcija koju treba memoizirati.
Niz ovisnosti.

Funkcija se ponovno stvara samo kada se promijeni jedna od ovisnosti u nizu. Inače, useCallback vraća istu instancu funkcije.

Primjer: Rukovanje klikom na gumb

Napravimo komponentu s gumbom koji pokreće funkciju povratnog poziva. Koristit ćemo useCallback za memoiziranje funkcije povratnog poziva.


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

function Button({ onClick, children }) {
  console.log('Gumb je ponovno renderiran'); // Pokazuje kada se Gumb ponovno renderira
  return ;
}

const MemoizedButton = React.memo(Button);

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

  const handleClick = useCallback(() => {
    console.log('Gumb je kliknut');
    setCount((prevCount) => prevCount + 1);
  }, []); // Prazan niz ovisnosti znači da se funkcija stvara samo jednom

  return (
    
      Brojač: {count}
      Povećaj
    
  );
}

export default App;

U ovom primjeru, funkcija handleClick se stvara samo jednom jer je niz ovisnosti prazan. Kada se komponenta App ponovno renderira zbog promjene stanja count, funkcija handleClick ostaje ista. Komponenta MemoizedButton, omotana s React.memo, ponovno će se renderirati samo ako se njezina svojstva promijene. Budući da svojstvo onClick (handleClick) ostaje isto, komponenta Button se ne renderira nepotrebno. Zamislite interaktivnu aplikaciju karte. Svaki put kada korisnik stupi u interakciju, može biti pogođeno na desetke komponenti gumba. Bez useCallback, ovi bi se gumbi nepotrebno ponovno renderirali, stvarajući usporeno iskustvo. Korištenje useCallback osigurava glatku interakciju.

Predstavljamo React.memo: Memoiziranje komponenti

React.memo je komponenta višeg reda (HOC) koja memoizira funkcionalnu komponentu. Sprječava ponovno renderiranje komponente ako se njezina svojstva nisu promijenila. Ovo je slično PureComponent za komponente klase.

Kada koristiti React.memo

Čiste komponente: Kada izlaz komponente ovisi isključivo o njezinim svojstvima i nema vlastito stanje.
Skupo renderiranje: Kada je proces renderiranja komponente računalno skup.
Česta ponovna renderiranja: Kada se komponenta često ponovno renderira, iako se njezina svojstva nisu promijenila.

Kako React.memo radi

React.memo omata funkcionalnu komponentu i površinski uspoređuje prethodna i sljedeća svojstva. Ako su svojstva ista, komponenta se neće ponovno renderirati.

Primjer: Prikaz korisničkog profila

Napravimo komponentu koja prikazuje korisnički profil. Koristit ćemo React.memo kako bismo spriječili nepotrebna ponovna renderiranja ako se korisnički podaci nisu promijenili.


import React from 'react';

function UserProfile({ user }) {
  console.log('UserProfile je ponovno renderiran'); // Pokazuje kada se komponenta ponovno renderira
  return (
    
      Ime: {user.name}
      E-pošta: {user.email}
    
  );
}

const MemoizedUserProfile = React.memo(UserProfile, (prevProps, nextProps) => {
  // Funkcija prilagođene usporedbe (izborno)
  return prevProps.user.id === nextProps.user.id; // Ponovno renderiraj samo ako se promijeni ID korisnika
});

function App() {
  const [user, setUser] = React.useState({
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateUser = () => {
    setUser({ ...user, name: 'Jane Doe' }); // Promjena imena
  };

  return (
    
      
      
    
  );
}

export default App;

U ovom primjeru, komponenta MemoizedUserProfile će se ponovno renderirati samo ako se promijeni svojstvo user.id. Čak i ako se druga svojstva objekta user promijene (npr. ime ili e-pošta), komponenta se neće ponovno renderirati osim ako je ID drugačiji. Ova funkcija prilagođene usporedbe unutar `React.memo` omogućuje finu kontrolu nad tim kada se komponenta ponovno renderira. Razmotrite platformu društvenih medija s korisničkim profilima koji se stalno ažuriraju. Bez `React.memo`, promjena statusa ili profilne slike korisnika uzrokovala bi potpuno ponovno renderiranje komponente profila, čak i ako osnovni detalji korisnika ostanu isti. `React.memo` omogućuje ciljana ažuriranja i značajno poboljšava performanse.

Kombiniranje useMemo, useCallback i React.memo

Ove tri tehnike su najučinkovitije kada se koriste zajedno. useMemo memoizira skupe izračune, useCallback memoizira funkcije, a React.memo memoizira komponente. Kombiniranjem ovih tehnika možete značajno smanjiti broj nepotrebnih ponovnih renderiranja u vašoj React aplikaciji.

Primjer: Složena komponenta

Napravimo složeniju komponentu koja pokazuje kako kombinirati ove tehnike.


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

function ListItem({ item, onUpdate, onDelete }) {
  console.log(`ListItem ${item.id} je ponovno renderiran`); // Pokazuje kada se komponenta ponovno renderira
  return (
    
      {item.text}
      
      
    
  );
}

const MemoizedListItem = React.memo(ListItem);

function List({ items, onUpdate, onDelete }) {
  console.log('Lista je ponovno renderirana'); // Pokazuje kada se komponenta ponovno renderira
  return (
    
      {items.map((item) => (
        
      ))}
    
  );
}

const MemoizedList = React.memo(List);

function App() {
  const [items, setItems] = useState([
    { id: 1, text: 'Stavka 1' },
    { id: 2, text: 'Stavka 2' },
    { id: 3, text: 'Stavka 3' },
  ]);

  const handleUpdate = useCallback((id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, text: `Ažurirano ${item.text}` } : item
      )
    );
  }, []);

  const handleDelete = useCallback((id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
  }, []);

  const memoizedItems = useMemo(() => items, [items]);

  return (
    
      
    
  );
}

export default App;

U ovom primjeru:

useCallback se koristi za memoiziranje funkcija handleUpdate i handleDelete, sprječavajući njihovo ponovno stvaranje pri svakom renderiranju.
useMemo se koristi za memoiziranje niza items, sprječavajući ponovno renderiranje komponente List ako se referenca niza nije promijenila.
React.memo se koristi za memoiziranje komponenti ListItem i List, sprječavajući njihovo ponovno renderiranje ako se njihova svojstva nisu promijenila.

Ova kombinacija tehnika osigurava da se komponente ponovno renderiraju samo kada je to potrebno, što dovodi do značajnog poboljšanja performansi. Zamislite veliki alat za upravljanje projektima gdje se popisi zadataka neprestano ažuriraju, brišu i preuređuju. Bez ovih optimizacija, svaka mala promjena popisa zadataka pokrenula bi kaskadu ponovnih renderiranja, čineći aplikaciju sporom i neodgovarajućom. Strateškim korištenjem useMemo, useCallback i React.memo, aplikacija može ostati učinkovita čak i sa složenim podacima i čestim ažuriranjima.

Dodatne tehnike optimizacije

Iako su useMemo, useCallback i React.memo moćni alati, oni nisu jedine mogućnosti za optimizaciju performansi Reacta. Evo nekoliko dodatnih tehnika koje treba razmotriti:

Razdvajanje koda: Razdvojite svoju aplikaciju na manje dijelove koji se mogu učitati na zahtjev. To smanjuje početno vrijeme učitavanja i poboljšava ukupne performanse.
Lijeno učitavanje: Učitajte komponente i resurse samo kada su potrebni. Ovo može biti posebno korisno za slike i druge velike resurse.
Virtualizacija: Renderirajte samo vidljivi dio velikog popisa ili tablice. To može značajno poboljšati performanse pri radu s velikim skupovima podataka. Biblioteke poput react-window i react-virtualized mogu pomoći u tome.
Debouncing i Throttling: Ograničite brzinu kojom se funkcije izvršavaju. Ovo može biti korisno za rukovanje događajima poput pomicanja i promjene veličine.
Nepromjenjivost: Koristite nepromjenjive strukture podataka kako biste izbjegli slučajne mutacije i pojednostavili otkrivanje promjena.

Globalna razmatranja za optimizaciju

Prilikom optimizacije React aplikacija za globalnu publiku, važno je uzeti u obzir čimbenike kao što su latencija mreže, mogućnosti uređaja i lokalizacija. Evo nekoliko savjeta:

Mreže za isporuku sadržaja (CDN): Koristite CDN za posluživanje statičkih resursa s lokacija bližih vašim korisnicima. To smanjuje latenciju mreže i poboljšava vrijeme učitavanja.
Optimizacija slike: Optimizirajte slike za različite veličine zaslona i razlučivosti. Koristite tehnike kompresije za smanjenje veličina datoteka.
Lokalizacija: Učitajte samo potrebne jezične resurse za svakog korisnika. To smanjuje početno vrijeme učitavanja i poboljšava korisničko iskustvo.
Prilagodljivo učitavanje: Otkrijte mrežnu vezu korisnika i mogućnosti uređaja i prilagodite ponašanje aplikacije u skladu s tim. Na primjer, možete onemogućiti animacije ili smanjiti kvalitetu slike za korisnike sa sporim mrežnim vezama ili starijim uređajima.

Zaključak

Optimizacija performansi React aplikacija ključna je za pružanje glatkog i brzog korisničkog iskustva. Savladavanjem tehnika poput useMemo, useCallback i React.memo, te razmatranjem globalnih strategija optimizacije, možete izgraditi React aplikacije visokih performansi koje se mogu prilagoditi potrebama raznolike baze korisnika. Ne zaboravite profilirati svoju aplikaciju kako biste identificirali uska grla performansi i strateški primijenili ove tehnike optimizacije. Nemojte prerano optimizirati – usredotočite se na područja u kojima možete postići najznačajniji utjecaj.

Ovaj vodič pruža solidnu osnovu za razumijevanje i implementaciju optimizacija performansi Reacta. Dok nastavljate razvijati React aplikacije, ne zaboravite dati prioritet performansama i neprestano tražiti nove načine za poboljšanje korisničkog iskustva.