React Best Practices

Was macht React Best Practices?

Umfassender Leitfaden zur Leistungsoptimierung von React-Anwendungen. Enthält 37 Regeln in 7 Kategorien, priorisiert nach Auswirkung.

Regelkategorien nach Priorität

Priorität	Kategorie	Auswirkung	Präfix
1	Wasserfälle vermeiden	KRITISCH	async-
2	Bundle-Größe optimieren	KRITISCH	bundle-
3	Clientseitiges Datenabrufen	MITTEL-HOCH	client-
4	Re-Rendering optimieren	MITTEL	rerender-
5	Rendering-Leistung	MITTEL	rendering-
6	JavaScript-Leistung	NIEDRIG-MITTEL	js-
7	Fortgeschrittene Muster	NIEDRIG	advanced-

Kurzreferenz

1. Wasserfälle vermeiden (KRITISCH)

• async-defer-await – await in die Zweige verschieben, wo es tatsächlich verwendet wird
• async-parallel – Promise.all()/allSettled() für unabhängige Operationen verwenden

2. Bundle-Größe optimieren (KRITISCH)

• bundle-dynamic-imports – React.lazy() für schwere Komponenten
• bundle-defer-third-party – Analyse/Logging bei Bedarf laden
• bundle-conditional – Module nur laden, wenn die Funktion aktiviert ist
• bundle-preload – Bei Hover/Fokus vorladen für gefühlte Geschwindigkeit

3. Clientseitiges Datenabrufen (MITTEL-HOCH)

• client-query-dedup – TanStack Query für automatische Anforderungsdeduplizierung verwenden
• client-event-listeners – Globale Event-Listener deduplizieren
• client-passive-event-listeners – Passive Listener für Scroll-Leistung verwenden
• client-localstorage-schema – localStorage-Daten versionieren und minimieren

4. Re-Rendering optimieren (MITTEL)

• rerender-defer-reads – Nicht auf Zustand abonnieren, der nur in Callbacks verwendet wird
• rerender-memo – Teure Arbeit in memoierte Komponenten auslagern
• rerender-dependencies – Primitive Abhängigkeiten in Effekten verwenden
• rerender-derived-state – Auf abgeleitete boolesche Werte abonnieren, nicht auf Rohwerte
• rerender-functional-setstate – Funktionelles setState für stabile Callbacks verwenden
• rerender-lazy-state-init – Funktion an useState übergeben für teure Werte
• rerender-transitions – startTransition für nicht dringende Aktualisierungen verwenden

5. Rendering-Leistung (MITTEL)

• rendering-animate-svg-wrapper – Div-Wrapper animieren, nicht das SVG-Element
• rendering-content-visibility – content-visibility für lange Listen verwenden
• rendering-hoist-jsx – Statisches JSX außerhalb von Komponenten extrahieren
• rendering-svg-precision – SVG-Koordinatenpräzision reduzieren
• rendering-activity – Activity-Komponente für Ein-/Ausblenden verwenden
• rendering-conditional-render – Ternary verwenden, nicht &&, für Bedingungen

6. JavaScript-Leistung (NIEDRIG-MITTEL)

• js-batch-dom-css – CSS-Änderungen über Klassen oder cssText gruppieren
• js-index-maps – Map für wiederholte Suchvorgänge erstellen
• js-cache-property-access – Objekteigenschaften in Schleifen cachen
• js-cache-function-results – Funktionsergebnisse in module-level Map cachen
• js-cache-storage – Lesezugriffe auf localStorage/sessionStorage cachen
• js-combine-iterations – Mehrere filter/map in einer Schleife kombinieren
• js-length-check-first – Array-Länge vor teuren Vergleichen prüfen
• js-early-exit – Frühzeitig aus Funktionen zurückkehren
• js-hoist-regexp – RegExp-Erstellung außerhalb von Schleifen hoisten
• js-min-max-loop – Schleife für min/max verwenden, statt sort
• js-set-map-lookups – Set/Map für O(1)-Suche verwenden
• js-tosorted-immutable – toSorted() für Unveränderlichkeit verwenden

7. Fortgeschrittene Muster (NIEDRIG)

• advanced-event-handler-refs – Event-Handler in refs speichern
• advanced-use-latest – useLatest für stabile Callback-Referenzen

Verwendung

Jede Regeldatei in references/ enthält: Erklärung, fehlerhafte/korrekte Codebeispiele und Kontext. Lesen Sie einzelne Dateien nach Bedarf.