0Pricing
Frontend Academy · Lektion

useMemo und useCallback für Performance

Memoisieren Sie aufwendige Berechnungen mit useMemo und stabile Funktionsreferenzen mit useCallback, um unnötige erneute Renderings von Child-Komponenten zu verhindern.

useMemo und useCallback für Performance ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Standardverhalten von React

Standardmäßig rendert React eine Komponente erneut, wenn sich ihr Zustand ändert oder ihre übergeordnete Komponente erneut gerendert wird. Auch untergeordnete Komponenten werden erneut gerendert, selbst wenn sich ihre Props nicht geändert haben. Für die meisten Komponenten ist das unproblematisch — React ist schnell.

useMemo — Aufwendige Werte memoisierten

useMemo(fn, deps) speichert das Ergebnis einer Berechnung zwischen. Die Funktion wird nur ausgeführt, wenn sich die Abhängigkeiten ändern. Verwenden Sie useMemo für aufwendige Berechnungen, deren Wiederholung bei jedem Rendern unnötig wäre.

const expensiveResult = useMemo(() => {
  return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changes

useCallback — Funktionen memoisierten

useCallback(fn, deps) gibt eine memoisierten Funktion zurück, deren Referenz gleich bleibt, solange sich deps nicht ändern. Verwenden Sie useCallback, wenn Sie Callbacks an tief verschachtelte oder memoisierten Komponenten übergeben.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used

<ItemList items={items} onDelete={handleDelete} />

React.memo — Erneutes Rendern überspringen

React.memo(Component) umschließt eine Komponente, sodass sie nur erneut gerendert wird, wenn sich ihre Props ändern (flacher Vergleich). Kombinieren Sie React.memo mit useCallback, um stabile Callback-Props zu erhalten.

const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
  console.log('Item rendered:', text); // only logs when props change
  return <li>{text} <button onClick={onDelete}>×</button></li>;
});

// onDelete must be stable (from useCallback) for memo to help

Wann Sie NICHT optimieren sollten

Verfrühte Optimierung ist eine Falle. useMemo und useCallback verursachen Kosten: für die Closure und den Vergleich der Abhängigkeiten. Bei günstigen Operationen (etwa dem Filtern von 10 Elementen) überwiegt der Aufwand den Nutzen. Optimieren Sie erst, wenn Sie ein tatsächliches Performance-Problem messen.

Vor der Optimierung profilieren

Verwenden Sie den Profiler der React DevTools, um die tatsächlichen Render-Zeiten zu messen, bevor Sie Memoization hinzufügen. Der Profiler zeigt, welche Komponenten am längsten brauchen und wie oft sie gerendert werden. Beheben Sie Probleme auf Grundlage von Fakten, nicht von Annahmen.

useMemo für stabile Referenzen

useMemo ist auch nützlich, um eine Referenz stabil zu halten — nicht wegen der Performance der Berechnung selbst, sondern um zu verhindern, dass ein nachgelagerter Memoization-Mechanismus oder ein Effekt unnötig erneut ausgeführt wird.

// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);

// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);

Abhängigkeiten von useCallback

Für useCallback gelten dieselben Abhängigkeitsregeln wie für useEffect. Nehmen Sie jede Variable aus dem äußeren Gültigkeitsbereich auf, die der Callback verwendet. State-Setter (von useState) sind immer stabil und müssen nicht in deps aufgenommen werden.

Das Verhältnis von useMemo und useCallback

useCallback(fn, deps) entspricht useMemo(() => fn, deps). Beide verwenden denselben Mechanismus — useCallback ist lediglich eine vereinfachte Schreibweise zum Memoisieren von Funktionen.

Memoization von Listenelementen

Ein gängiges Muster ist, Komponenten für Listenelemente zu memoisierten, wenn die Liste groß ist und häufig erneut gerendert wird. Übergeben Sie stabile Callbacks aus useCallback, damit die Memoization nicht unwirksam wird.

const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel  = useCallback((id) => remove(id), []);

{rows.map(row => (
  <MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}

Memoization von Context-Werten

Memoisieren Sie den an einen Context-Provider übergebenen Wert, damit nicht alle Consumer erneut gerendert werden, wenn die übergeordnete Komponente des Providers erneut gerendert wird.

const value = useMemo(() => ({ user, login, logout }), [user]);

Kurze Prüfung

Welchen Zweck hat useCallback?

Zusammenfassung: useMemo und useCallback

useMemo speichert aufwendig berechnete Werte zwischen. useCallback speichert Funktionsreferenzen zwischen. React.memo überspringt erneute Renderings, wenn sich Props bei einem flachen Vergleich nicht ändern. Kombinieren Sie alle drei für die Performance auf Komponentenebene. Profilieren Sie zuerst — verfrühte Memoization erhöht die Komplexität ohne Nutzen. Stabile Referenzen verhindern, dass nachgelagerte Effekte und Memoizationen erneut ausgeführt werden.

Häufig gestellte Fragen

Ist die Lektion „useMemo und useCallback für Performance“ kostenlos?

Ja — der vollständige Text von „useMemo und useCallback für Performance“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „useMemo und useCallback für Performance“?

Memoisieren Sie aufwendige Berechnungen mit useMemo und stabile Funktionsreferenzen mit useCallback, um unnötige erneute Renderings von Child-Komponenten zu verhindern. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „useMemo und useCallback für Performance“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. useContext für globalen State
  2. useReducer für komplexen State
  3. useMemo und useCallback für Performance
  4. Custom Hooks: wiederverwendbare Logik extrahieren
← Zurück zu Frontend Academy