De useMemo-hook stelt ons in staat het resultaat van een functie te onthouden, waardoor dure berekeningen worden geoptimaliseerd door het resultaat in de cache op te slaan. Dit is voordelig wanneer er frequente en intensieve berekeningen plaatsvinden die hetzelfde resultaat opleveren zolang de gegevens niet veranderen. Hierdoor zijn overbodige herberekeningen niet nodig, wat leidt tot betere prestaties.

Syntax:

We declareren een nieuwe variabele, zoals cachedValue, en wijzen deze toe aan de useMemo-hook. Binnen de haakjes van de hook geven we een functie op (bijvoorbeeld calculateValue), die wordt uitgevoerd om de onthouden waarde te berekenen. Deze functie kan elke geldige JavaScript-functie zijn. Daarnaast voegen we een tweede argument toe—een array genaamd dependencies—die bestaat uit de waarden waarop de onthouden waarde is gebaseerd.

const cachedValue = useMemo(calculateValue, dependencies)

Wanneer een van de afhankelijkheden in de dependencies-array verandert, wordt de onthouden waarde opnieuw berekend. Als de afhankelijkheden echter gelijk blijven tussen renders, retourneert React de eerder berekende waarde zonder opnieuw te berekenen.

Opmerking

Deze optimalisatie helpt de prestaties te verbeteren door onnodige berekeningen te vermijden en resulteert in een efficiëntere gebruikerservaring.

Voorbeeld 1

Hier wordt de ShoppingCart-component aangemaakt, die informatie opslaat over het aantal geselecteerde producten door de gebruiker. Daarnaast wordt de logica afgehandeld voor het berekenen van het totale bedrag, waarmee het te betalen bedrag wordt aangegeven. Het belangrijkste doel is om de totale som te memoriseren en deze alleen opnieuw te berekenen wanneer de gebruiker de products-prop aanpast die aan deze component wordt doorgegeven.

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

De berekening van de totalPrice wordt uitgevoerd binnen de useMemo-hook, waardoor onnodige herberekeningen bij elke her-render van de component worden voorkomen.

Regel-voor-regel uitleg:

• Regel 1: De useMemo-hook wordt geïmporteerd uit de React-bibliotheek om de functionaliteit te benutten;
• Regel 3: De ShoppingCart-component wordt gedefinieerd met de conventionele functiesyntaxis;
• Regel 4-10: De variabele totalPrice wordt aangemaakt, verantwoordelijk voor het totale bedrag dat de gebruiker moet betalen. De useMemo-hook wordt gebruikt om te voorkomen dat de berekening bij elke render wordt uitgevoerd;
  • Regel 5-9: Binnen de arrow-functie die aan useMemo wordt doorgegeven, wordt de logica voor het berekenen van de totale sum geïmplementeerd. Elk item in de products-array wordt doorlopen, waarbij de prijs wordt vermenigvuldigd met de quantity en opgeteld bij de variabele sum;
  • Regel 10: De afhankelijkheidsarray [products] wordt aan de useMemo-hook meegegeven. Dit geeft aan dat de gememoriseerde waarde alleen opnieuw moet worden berekend als de products-array verandert.
• Regels 12-31: De markup van de component wordt gerenderd.
  1. Regel 16: De map-methode wordt gebruikt om elk product in de products-array te renderen, waarbij een overeenkomstig JSX-element wordt aangemaakt;
  2. Regel 17: Het key-attribuut wordt ingesteld om efficiënte rendering van de array-items te waarborgen en React te helpen elk item uniek te identificeren;

3. Regel 28: De waarde van de variabele totalPrice wordt weergegeven binnen de JSX, waarmee de berekende totaalprijs wordt getoond.

Volledige app-code:

Opmerking

Het is raadzaam om de useEffect- en useMemo-hooks niet te combineren om duidelijkheid te behouden en verwarring te voorkomen. Het belangrijkste verschil zit in hun respectievelijke doeleinden: useEffect wordt gebruikt voor het beheren van neveneffecten en de levenscyclus van componenten, terwijl useMemo dure berekeningen onthoudt om de prestaties te verbeteren.