Langsame Re-Renders in React diagnostizieren und beheben

Prompt

Arbeite als React-Performance-Spezialist, der erst diagnostiziert und dann optimiert.

Kontext:
- Betroffener Code: {{code}}
- Beobachtetes Symptom: {{symptom}}
- Messdaten (falls vorhanden): {{messdaten}}
- React-Version: {{react_version}}

Wenn der Code nicht reicht, um zu sehen, woher Props oder State kommen, frag nach den Elternkomponenten oder dem Context, bevor du Änderungen vorschlägst.

Liefere:
1. Hypothesen, nach Wahrscheinlichkeit sortiert, für die überflüssigen Re-Renders oder die Mehrarbeit (State zu weit oben, Context-Wert, der sich bei jedem Render ändert, neue Objekte oder Funktionen pro Render, lange Listen ohne Virtualisierung, teure Berechnungen im Render, instabile Keys).
2. Wie sich jede Hypothese mit dem React-DevTools-Profiler bestätigen lässt (was aufzeichnen, worauf im Flamegraph und bei „Warum wurde gerendert“ achten) und, wo sinnvoll, mit dem Performance-Panel des Browsers.
3. Die Fixes, von einfach bis komplex: State nach unten verschieben, Inhalte als children übergeben, Context aufteilen, useMemo/useCallback/memo nur, wo die Messung es rechtfertigt, useDeferredValue oder useTransition für Texteingaben, Listen virtualisieren.
4. Code vorher und nachher für jede umgesetzte Änderung mit erwarteter Wirkung.
5. Wie die Verbesserung mit derselben Messung geprüft wird und welche Schwelle als ausreichend gilt.
6. Was du vermeiden solltest: alles in memo packen, ohne Messung optimieren oder Lesbarkeit für Minigewinne opfern.

Vorgaben:
- Erfinde keine Zeiten oder prozentualen Verbesserungen; wenn ich keine Messungen habe, erkläre, wie ich sie bekomme, und lass [AUSFÜLLEN] stehen.
- Nutzt die Version den React Compiler, berücksichtige, dass er bereits automatisch memoisiert, und passe die Empfehlungen an.
- Das funktionale Verhalten bleibt identisch.

Format: Diagnose, Messplan, Änderungen mit Codeblöcken und eine abschließende Prüfliste.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

import { memo, useDeferredValue, useMemo, useState } from 'react';

export function BestellTabelle({ bestellungen }: { bestellungen: Bestellung[] }) {
  const [filter, setFilter] = useState('');
  const verzoegerterFilter = useDeferredValue(filter);
  const sichtbar = useMemo(
    () => bestellungen.filter((b) => b.kunde.toLowerCase().includes(verzoegerterFilter.toLowerCase())), // [AUSFÜLLEN: echtes Feld]
    [bestellungen, verzoegerterFilter],
  );
  return (
    <>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} aria-label="Bestellungen filtern" />
      <Zeilen bestellungen={sichtbar} />
    </>
  );
}

const Zeilen = memo(function Zeilen({ bestellungen }: { bestellungen: Bestellung[] }) {
  return <table><tbody>{bestellungen.map((b) => <BestellZeile key={b.id} bestellung={b} />)}</tbody></table>;
});

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · React

Ausgabetyp

Code

Niveau

Experte

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Betroffener Code, Symptom, Messdaten und React-Version

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen