Hooken useMemo gör det möjligt att memorera resultatet av en funktion, vilket optimerar resurskrävande beräkningar genom att cacha resultatet. Detta är fördelaktigt när vi har frekventa och resursintensiva beräkningar som ger samma resultat när datan inte förändras. Det eliminerar behovet av onödiga omberäkningar och leder till förbättrad prestanda.

Syntax:

En ny variabel, till exempel cachedValue, deklareras och tilldelas hooken useMemo. Inuti parenteserna för hooken anges en funktion (t.ex. calculateValue), som kommer att köras för att beräkna det memorerade värdet. Denna funktion kan vara vilken giltig JavaScript-funktion som helst. Dessutom inkluderas ett andra argument—en array kallad dependencies—som består av de värden som det memorerade värdet är beroende av.

const cachedValue = useMemo(calculateValue, dependencies)

När någon av beroendena som anges i arrayen dependencies ändras, kommer det memorerade värdet att beräknas om. Om beroendena däremot förblir oförändrade mellan renderingar, returnerar React det tidigare beräknade värdet utan omberäkning.

Note

Denna optimering bidrar till förbättrad prestanda genom att undvika onödiga beräkningar och resulterar i en mer effektiv användarupplevelse.

Exempel 1

Skapa komponenten ShoppingCart, som lagrar information om antalet produkter användaren väljer. Dessutom hanterar den logiken för att beräkna den totala summan, vilket visar det belopp användaren ska betala. Huvudmålet är att memorisera den totala summan och endast beräkna om den när användaren ändrar products-propen som skickas till denna komponent.

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>
  );
};

Beräkningen av totalPrice utförs inom useMemo-hooken, vilket förhindrar onödig omberäkning vid varje omrendering av komponenten.

Rad-för-rad-förklaring:

• Rad 1: Vi importerar useMemo-hooken från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Komponentet ShoppingCart definieras med konventionell funktionssyntax;
• Rad 4-10: Variabeln totalPrice skapas, ansvarig för det totala priset användaren ska betala. useMemo-hooken används för att undvika beräkningar vid varje rendering;
  • Rad 5-9: Inuti pilfunktionen som skickas till useMemo implementeras logiken för att beräkna den totala sum. Varje objekt i products-arrayen itereras, priset multipliceras med quantity och adderas till variabeln sum;
  • Rad 10: Beroende-arrayen [products] skickas till useMemo-hooken. Detta indikerar att det memorerade värdet ska beräknas om om products-arrayen ändras.
• Rad 12-31: Komponentens markup renderas.
  1. Rad 16: map-metoden används för att rendera varje produkt i products-arrayen och skapa motsvarande JSX-element;

2. Rad 17: Attributet key anges för att säkerställa effektiv rendering av arrayens objekt och hjälpa React att identifiera varje objekt unikt;
3. Rad 28: Värdet av variabeln totalPrice renderas i JSX och visar det beräknade totalpriset.

Full app code:

Obs

Det är tillrådligt att inte blanda useEffect och useMemo-hookarna för att säkerställa tydlighet och undvika förvirring. Den viktigaste skillnaden ligger i deras respektive syften: useEffect används för att hantera sid-effekter och komponentlivscykel, medan useMemo memorerar kostsamma beräkningar för att förbättra prestandan.