Wann du React memo, useMemo und useCallback einsetzt, mit Live-Render-Zählern. Dazu forwardRef und ref als Prop in React 19, Modals mit createPortal, Labels mit useId und eine virtuelle Liste mit 10,000 Zeilen.
Umschließe eine Komponente mit memo, um Renders zu überspringen, wenn sich ihre Props nicht geändert haben. Nutze useCallback, damit eine Funktions-Prop zwischen Renders gleich bleibt, und useMemo, um ein Objekt oder eine langsame Berechnung zu cachen. Sie bringen nur etwas zusammen mit memo oder bei echten Kosten. Miss zuerst mit dem React Profiler; die Live-Zähler unten zeigen den Unterschied.
Je eine Zeile
Die Demos zählen echte Renders in deinem Browser. Tippe in jedes Feld, einmal mit ausgeschaltetem und einmal mit eingeschaltetem Schalter, und beobachte die Zähler. Die zweite Hälfte behandelt die Referenz-APIs, die bei Performance-Arbeit gleich daneben auftauchen: Refs, Portals und IDs.
useMemo ruft deine Funktion auf und cacht den Wert, den sie zurückgibt. useCallback cacht die Funktion selbst. useCallback(fn, deps) ist dasselbe wie useMemo(() => fn, deps).
Nein. Auch der Vergleich der Props kostet Zeit, und die meisten Renders sind billig. Setze memo dort ein, wo der Profiler zeigt, dass eine Komponente oft mit denselben Props rendert und dabei spürbar Zeit braucht.
In React 19 akzeptieren Funktionskomponenten ref als normale Prop, neuer Code braucht forwardRef also nicht mehr. Es funktioniert weiterhin, und das React-Team hat angekündigt, dass es in einem künftigen Release als veraltet markiert wird.
Ein Modal in einer Karte mit overflow hidden oder einem transform kann abgeschnitten werden oder unter anderen Inhalten liegen. Mit createPortal in document.body gerendert, vermeidest du beides und behältst es trotzdem in deinem React-Baum.
Nein. useId ist für Barrierefreiheits-Attribute wie htmlFor und aria-describedby gedacht. Keys sollten aus deinen Daten stammen, etwa eine Datenbank-ID.
Welches Werkzeug für welches Problem
Tippe in das Feld. Ohne memo rendert die Liste bei jeder Taste neu, obwohl sich ihre Props nicht geändert haben. Mit memo rendert sie nur einmal.
Eine Inline-Arrow-Funktion hebelt memo aus, weil bei jedem Render eine neue Funktion entsteht. useCallback gibt dieselbe zurück, bis sich ihre Abhängigkeiten ändern.
20,000 Produkte bei jedem Render zu filtern ist verschwendete Arbeit, wenn sich nur ein unabhängiger Wert geändert hat. useMemo führt den Filter nur erneut aus, wenn sich products oder query ändern.
Ein Parent kann einer Funktionskomponente kein ref übergeben, es sei denn, die Komponente leitet es weiter. forwardRef reicht das ref an ein echtes Element durch.
Ab React 19 erhalten Funktionskomponenten ref wie jede andere Prop, daher ist forwardRef in neuem Code nicht mehr nötig.
Ein Portal rendert children in einen anderen DOM-Knoten, meist document.body, damit ein Modal Parents mit overflow hidden oder niedrigem z-index entkommt. React-Events steigen trotzdem durch den React-Baum auf.
useId liefert eine eindeutige ID, die beim Rendern auf Server und im Browser übereinstimmt, sodass mehrere Kopien derselben Feldkomponente nie kollidieren.
List rendert nur die sichtbaren Zeilen plus ein paar zusätzliche. Jede Zeile bekommt index und style; style positioniert die Zeile und muss angewendet werden. Die Demo daneben nutzt dieselbe Idee, von Hand geschrieben.
Baust du Formulare? useId passt gut zu
Liste {n}-mal gerendert ({count} Einträge)
Liste mit memo umschließen
Hier tippen
({n} Renders)
useCallback verwenden
Klein
Mittel
Groß
Gewählt: {x}
Mit useMemo cachen
Produkte filtern
Unabhängiger Klick ({n})
{matches} von 20,000 passen. Filter lief {runs}-mal; letzter Lauf dauerte {ms} ms.
Suche
Suche fokussieren
Diese Box hat overflow hidden, trotzdem bedeckt das Modal das ganze Fenster.
Modal öffnen
Portal-Demo
Ich wurde mit createPortal in document.body gerendert.
Schließen
Wir antworten innerhalb eines Tages.
E-Mail (noch einmal)
Dieselbe Komponente, andere ID.
10,000 Kunden
Kunde {n}
10,000 Zeilen, aber gerade sind nur {n} im DOM.
Kostenlos starten · Keine Kreditkarte nötig