Der useMemo-Hook ist Teil der Hooks-API von React, die in React 16.8 eingeführt wurde und darauf ausgelegt ist, die Leistung durch Speichern der Ergebnisse teurer Berechnungen zu optimieren. Hier ist eine ausführliche Erklärung:

Was ist useMemo?

useMemo ist ein Hook, der einen gespeicherten Wert zurückgibt. Damit können Sie das Ergebnis einer Berechnung zwischenspeichern, sodass es nicht bei jedem Rendern neu berechnet werden muss, es sei denn, seine Abhängigkeiten ändern sich. Dies kann dazu beitragen, unnötige erneute Renderings zu vermeiden und die Leistung Ihrer React-Anwendung zu verbessern.

Syntax

const memoizedValue = useMemo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

Parameter

1. Funktion (Rückruf): Eine Funktion, die einen Wert zurückgibt, den Sie sich merken möchten.
2. Abhängigkeitsarray: Ein Array von Abhängigkeiten, das bei Änderung dazu führt, dass der gespeicherte Wert neu berechnet wird. Wenn dieses Array leer ist, wird der Wert nur einmal berechnet (wie „componentDidMount“).

Wie es funktioniert

• Beim ersten Rendern führt useMemo die bereitgestellte Funktion aus und gibt ihr Ergebnis zurück, das in memoizedValue gespeichert wird.
• Bei nachfolgenden Renderings prüft React, ob sich eine der Abhängigkeiten geändert hat. Ist dies nicht der Fall, wird der zwischengespeicherte Wert zurückgegeben, anstatt ihn neu zu berechnen.
• Wenn sich eine Abhängigkeit geändert hat, führt React die Funktion erneut aus, aktualisiert den zwischengespeicherten Wert und gibt den neuen Wert zurück.

Beispiel

Hier ist ein einfaches Beispiel zur Veranschaulichung von useMemo:

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

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n  computeFactorial(number), [number]);

  return (
    

      
Factorial of {number} is {factorial}
    
  );
};

const App = () => {
  const [num, setNum] = useState(0);

  return (
    

       setNum(num   1)}>Increase Number
      
    
  );
};

export default App;

Wann sollte useMemo verwendet werden?

• Teure Berechnungen: Verwenden Sie useMemo, wenn Sie Berechnungen haben, die hinsichtlich der Leistung teuer sind und nur neu berechnet werden müssen, wenn sich bestimmte Eingaben ändern.
• Unnötige Renderings vermeiden: Wenn Sie Objekte oder Arrays als Requisiten an untergeordnete Komponenten übergeben, können Sie mit useMemo sicherstellen, dass sie nicht bei jedem Rendering neu erstellt werden, wodurch unnötige erneute Renderings vermieden werden.

Wichtige Überlegungen

• Leistung: Übermäßiger Gebrauch von useMemo kann zu komplexerem Code führen und führt möglicherweise nicht immer zu Leistungsvorteilen. Am besten nutzen Sie es für wirklich teure Berechnungen.
• Funktionsneuerstellung: Wenn Sie Funktionen auswendig lernen, seien Sie vorsichtig, da die Funktionsdefinition immer noch neu erstellt wird, sofern sie nicht in useCallback eingeschlossen ist.

Abschluss

useMemo ist ein leistungsstarkes Tool in React zur Optimierung der Leistung durch Merken von Werten. Dadurch kann sichergestellt werden, dass teure Berechnungen nur bei Bedarf durchgeführt werden, wodurch die Effizienz Ihrer React-Komponenten gesteigert wird. Es sollte jedoch mit Bedacht eingesetzt werden, um unnötige Komplexität in Ihrem Code zu vermeiden.