Inhaltsverzeichnis
- useMemo (calculateValue, dependencies)
- Definition useMemo
- Beispiel Code “useMemo”
- Ersatz oder Alternativen in React 18
- Praxisbeispiel für den Einsatz von “useMemo”
- useCallback
- Definition useCallback
- Beispiel Code “useCallback”
- Praxisbeispiel für den Einsatz von “useCallback”
- Cloudapp-dev und bevor Sie uns verlassen
React führte die useMemo und useCallback Hooks in React 16.8 ein, das am 6. Februar 2019 veröffentlicht wurde. Im August 2024 sind diese Hooks also fünf Jahre und sechs Monate alt.
Hier ist das GitHub Repo mit dem gesamten Code und darunter der Link zur Beispielwebsite.
Beispielseite für mit integrierter Datenerfassung -> https://nextjs14-kafka-tracking.vercel.app/
useMemo (calculateValue, dependencies)
Definition useMemo
Der useMemo-Hook in React wird verwendet, um die Leistung zu optimieren, indem das Ergebnis einer Funktion in einem Memo gespeichert wird, so dass sie nur neu berechnet wird, wenn sich eine ihrer Abhängigkeiten ändert. Dies ist besonders nützlich für aufwändige Berechnungen, die sonst bei jedem Rendering ausgeführt werden. calculateValue ist eine Funktion, die für Berechnungen innerhalb der Komponente vorgesehen ist.
dependencies ist ein Array mit Werten
Wenn die Komponente erstmals gerendert wird, wird useMemo aufgerufen. Anschließend wird calculateValue immer dann ausgeführt, wenn sich der Wert/die Werte in den Abhängigkeiten ändern. Wenn die Werte in den Abhängigkeiten unverändert bleiben, werden die zwischengespeicherten Daten verwendet, um unnötige Renderings zu vermeiden.
Im Strict Mode ruft React die Berechnungsfunktion zweimal auf, um die Eindeutigkeit der Komponente zu gewährleisten, sodass React-Komponenten bei gleichen Eingaben das gleiche Ergebnis liefern. Dieses Verhalten ist ausschließlich im Entwicklungsmodus aktiv und hat keine Auswirkungen auf die Logik.
Beispiel Code “useMemo”
In diesem Beispiel wird useMemo das Ergebnis von calculateValue nur dann neu berechnen, wenn sich die Abhängigkeiten ändern; andernfalls wird das zuvor zwischengespeicherte Ergebnis zurückgegeben.
Ersatz oder Alternativen in React 18
React 18 bietet keinen direkten Ersatz für useMemo, aber es führt Funktionen wie automatische Stapelverarbeitung und gleichzeitiges Rendern ein, die die Leistung auf andere Weise verbessern können. Dennoch ist useMemo nach wie vor relevant und wird häufig für die Optimierung bestimmter Szenarien verwendet, in denen die Neuberechnung von Werten bei jedem Rendering zu kostspielig wäre.
Die neuen Funktionen in React 18 können dazu beitragen, den Bedarf an Optimierungen wie useMemo in einigen Fällen zu verringern, aber es gibt keine direkte Alternative oder einen Ersatz. useMemo ist weiterhin ein nützliches Werkzeug zur Verwaltung der Leistung.
Praxisbeispiel für den Einsatz von “useMemo”
Nachfolgend finden Sie den Link zu einem früheren Beitrag, in dem ich die useMemo Hooks in einem realen Beispiel zur Erstellung eines benutzerdefinierten Dashboards verwendet habe.
Next.js 14 -Advanced Analytics with Tinybird and integrated Dashboard
ch habe die useMemo-Hooks in allen fünf Dashboard-Komponenten verwendet, um das Datenergebnis zu speichern. Im Beispiel unten von der Funktion useTrend. Wenn sich die [data] „Abhängigkeit“ ändert, wird der useMemo-Hook erneut ausgeführt.
useCallback
Definition useCallback
Ähnlich wie useMemo können Sie auch diesen Hook verwenden, um die Leistung zu optimieren. Der useCallback-Haken merkt sich eine Callback-Funktion und gibt sie zurück.
Beachten Sie, dass der useCallback-Hook die Funktion selbst speichert, nicht ihren Rückgabewert. useMemo speichert den Rückgabewert der Funktion, so dass die Funktion nicht erneut ausgeführt wird. useCallback speichert die Funktionsdefinition oder den Funktionsverweis.
Der useCallback-Hook in React wird zur Memoisierung von Funktionen verwendet, um sicherzustellen, dass eine Funktion nur neu erstellt wird, wenn sich ihre Abhängigkeiten ändern. Dies ist besonders nützlich, wenn Funktionen als Ref an untergeordnete Komponenten übergeben werden, da es unnötige Neuaufrufe dieser untergeordneten Komponenten verhindert, indem es sicherstellt, dass die Funktionsreferenz dieselbe bleibt, sofern nicht erforderlich.
Beispiel Code “useCallback”
In diesem Beispiel speichert useCallback die Funktion handleClick. Die Funktion wird nur neu erstellt, wenn sich das Array dependencies (das in diesem Fall leer ist) ändert. Dies hilft dabei, unnötige Neuaufrufe von MyComponent zu vermeiden, wenn die ParentComponent aus Gründen, die nichts mit der handleClick-Funktion zu tun haben, neu aufgerufen wird.
Praxisbeispiel für den Einsatz von “useCallback”
Im folgenden Code verwende ich den „useCallback“-Hook, um den „setDateFilter“ zu setzen, der bei jeder Änderung des from / to Datums aufgerufen wird.
Die Hooks „useMemo“ und „useCallback“ können unser Webprojekt erheblich beschleunigen. Caching ist der Schlüssel für eine hohe Konversationsrate und eine gute Positionierung in den Google SERPs.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
