Hooken useMemo gjør det mulig å mellomlagre resultatet av en funksjon, og optimaliserer ressurskrevende beregninger ved å lagre resultatet i cache. Dette er fordelaktig når vi har hyppige og ressursintensive kalkulasjoner som gir samme resultat så lenge dataene ikke endres. Dette eliminerer behovet for unødvendige omberegninger, noe som gir bedre ytelse.

Syntaks:

Vi deklarerer en ny variabel, for eksempel cachedValue, og tilordner den til hooken useMemo. Inne i parentesene til hooken oppgir vi en funksjon (for eksempel calculateValue), som vil bli kjørt for å beregne den mellomlagrede verdien. Denne funksjonen kan være en hvilken som helst gyldig JavaScript-funksjon. I tillegg inkluderer vi et andre argument—et array kalt dependencies—som består av verdiene den mellomlagrede verdien er avhengig av.

const cachedValue = useMemo(calculateValue, dependencies)

Når noen avhengigheter spesifisert i dependencies-arrayet endres, vil den mellomlagrede verdien bli beregnet på nytt. Dersom avhengighetene forblir uendret mellom renderingene, vil React returnere den tidligere beregnede verdien uten å gjøre en ny beregning.

Note

Denne optimaliseringen bidrar til bedre ytelse ved å unngå unødvendige kalkulasjoner, og gir en mer effektiv brukeropplevelse.

Eksempel 1

Vi skal lage komponenten ShoppingCart, som lagrer informasjon om antall produkter brukeren velger. I tillegg håndterer den logikken for å beregne totalbeløpet, som viser hvor mye brukeren må betale. Hovedmålet er å memoize totalbeløpet og kun beregne det på nytt når brukeren endrer products-propen som sendes til denne komponenten.

import React, { useMemo } from "react";

const ShoppingCart = ({ products }) => {
  const totalPrice = useMemo(() => {
    let sum = 0;
    for (const item of products) {
      sum += item.price * item.quantity;
    }
    return sum;
  }, [products]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {products.map(({ id, name, price, quantity }) => (
          <li key={id}>
            <p>
              <span>{name} -</span>
              <span>
                ${price} x {quantity}
              </span>
            </p>
          </li>
        ))}
      </ul>
      <h3>
        Total Price: <span>${totalPrice}</span>
      </h3>
    </div>
  );
};

Beregningen av totalPrice utføres i useMemo-hooken, som forhindrer unødvendig beregning ved hver re-render av komponenten.

Linje for linje-forklaring:

• Linje 1: Import av useMemo-hooken fra React-biblioteket for å benytte dens funksjonalitet;
• Linje 3: ShoppingCart-komponenten defineres med konvensjonell funksjonssyntaks;
• Linje 4-10: Variabelen totalPrice opprettes og er ansvarlig for totalprisen brukeren må betale. useMemo-hooken brukes for å unngå beregning ved hver rendering;
  • Linje 5-9: I arrow-funksjonen som sendes til useMemo, implementeres logikken for å beregne total sum. Hvert element i products-arrayet itereres, og prisen multipliseres med quantity og legges til sum-variabelen;
  • Linje 10: Avhengighetsarrayen [products] sendes til useMemo-hooken. Dette indikerer at den memoiserte verdien kun skal beregnes på nytt hvis products-arrayet endres.
• Linje 12-31: Markup for komponenten rendres.
  1. Linje 16: map-metoden brukes for å rendre hvert produkt i products-arrayet og opprette tilsvarende JSX-element;
  2. Linje 17: key-attributtet settes for å sikre effektiv rendering av array-elementene og hjelpe React med å identifisere hvert element unikt;

3. Linje 28: Verdien til variabelen totalPrice vises i JSX, og viser den beregnede totalprisen.

Full app-kode:

Merk

Det anbefales å ikke blande useEffect og useMemo-hookene for å sikre klarhet og unngå forvirring. Den viktigste forskjellen ligger i deres respektive formål: useEffect brukes til å håndtere sideeffekter og komponentlivssyklus, mens useMemo memorerer kostbare beregninger for å forbedre ytelsen.