Der useMemo-Hook ermöglicht es, das Ergebnis einer Funktion zu speichern (Memoisierung), wodurch aufwendige Berechnungen durch Zwischenspeicherung des Ergebnisses optimiert werden. Dies ist vorteilhaft, wenn häufig rechenintensive Operationen durchgeführt werden, die bei unveränderten Daten stets das gleiche Ergebnis liefern. Dadurch werden überflüssige Neuberechnungen vermieden, was zu einer verbesserten Performance führt.

Syntax:

Es wird eine neue Variable, beispielsweise cachedValue, deklariert und dem useMemo-Hook zugewiesen. Innerhalb der Klammern des Hooks wird eine Funktion (z. B. calculateValue) übergeben, die zur Berechnung des gespeicherten Werts ausgeführt wird. Diese Funktion kann jede gültige JavaScript-Funktion sein. Zusätzlich wird ein zweites Argument übergeben – ein Array namens dependencies –, das die Werte enthält, von denen der gespeicherte Wert abhängt.

const cachedValue = useMemo(calculateValue, dependencies)

Wenn sich eine der im dependencies-Array angegebenen Abhängigkeiten ändert, wird der gespeicherte Wert neu berechnet. Bleiben die Abhängigkeiten zwischen den Render-Vorgängen jedoch gleich, gibt React den zuvor berechneten Wert zurück, ohne ihn erneut zu berechnen.

Hinweis

Diese Optimierung trägt dazu bei, die Performance zu verbessern, indem unnötige Berechnungen vermieden werden, und sorgt für eine effizientere Benutzererfahrung.

Beispiel 1

Wir erstellen die Komponente ShoppingCart, die Informationen über die Anzahl der vom Benutzer ausgewählten Produkte speichert. Zusätzlich übernimmt sie die Logik zur Berechnung der Gesamtsumme, die angibt, welchen Betrag der Benutzer bezahlen muss. Das Hauptziel ist es, die Gesamtsumme zu memorisieren und sie nur dann neu zu berechnen, wenn sich die an diese Komponente übergebene products-Prop ändert.

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

Die Berechnung des totalPrice erfolgt innerhalb des useMemo-Hooks, wodurch unnötige Neuberechnungen bei jedem erneuten Rendern der Komponente verhindert werden.

Zeilenweise Erklärung:

• Zeile 1: Import des useMemo-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität;
• Zeile 3: Die Komponente ShoppingCart wird mit der üblichen Funktionssyntax definiert;
• Zeile 4-10: Die Variable totalPrice wird erstellt, die für den Gesamtpreis verantwortlich ist, den der Benutzer bezahlen muss. Der useMemo-Hook wird verwendet, um Berechnungen nicht bei jedem Render durchzuführen;
  • Zeile 5-9: Innerhalb der an useMemo übergebenen Pfeilfunktion wird die Logik zur Berechnung der gesamten sum implementiert. Jedes Element im Array products wird durchlaufen, der Preis mit der quantity multipliziert und zur Variablen sum addiert;
  • Zeile 10: Das Abhängigkeitsarray [products] wird dem useMemo-Hook übergeben. Dies gibt an, dass der gespeicherte Wert neu berechnet werden soll, wenn sich das Array products ändert.
• Zeile 12-31: Das Markup der Komponente wird gerendert.
  1. Zeile 16: Die Methode map wird verwendet, um jedes Produkt im Array products zu rendern und ein entsprechendes JSX-Element zu erzeugen;
  2. Zeile 17: Das Attribut key wird gesetzt, um ein effizientes Rendern der Array-Elemente zu gewährleisten und React zu helfen, jedes Element eindeutig zu identifizieren;

3. Zeile 28: Der Wert der Variablen totalPrice wird im JSX gerendert und zeigt den berechneten Gesamtpreis an.

Vollständiger App-Code:

Hinweis

Es ist ratsam, die Hooks useEffect und useMemo nicht zu vermischen, um Klarheit zu gewährleisten und Verwirrung zu vermeiden. Der wesentliche Unterschied liegt in ihrem jeweiligen Zweck: useEffect wird zur Verwaltung von Seiteneffekten und des Komponenten-Lebenszyklus verwendet, während useMemo aufwändige Berechnungen speichert, um die Performance zu verbessern.