perf(dashboard): React-Review - Memoization, stabile Callbacks, Key-Fixes
React.memo auf allen 8 Kachel-Komponenten + TileFrame, damit Interaktionen (Anpassen/Monitor/Größe/Ausblenden) nicht mehr alle Kacheln unnötig neu rendern. Voraussetzung dafür: onAusblendenUmschalten/onGroesseAendern als stabile useCallback-Referenzen mit id-Parameter statt pro Kachel neu erzeugter Closures. Die vier Layout-Mutationsfunktionen (dragEnde/ausblendenUmschalten/groesseAendern/layoutZuruecksetzen) über eine gemeinsame aktualisiereLayout-Helper-Funktion mit funktionalem setState dedupliziert (vermeidet stale-closure-Risiko bei schnellen Interaktionen). Instabile Index-Keys in PrueftermineTile/AufgabenTile durch stabile Keys ersetzt. maengelOffenListe in MaengelTile mit useMemo. Fehler-Anzeige bekommt "Erneut versuchen"-Button. Drag-Griff in TileFrame: type="button" + aria-roledescription für Screenreader. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
import { memo } from "react";
|
||||
|
||||
import type { Kennzahlen } from "../types";
|
||||
|
||||
interface Props {
|
||||
kennzahlen: Kennzahlen;
|
||||
}
|
||||
|
||||
export function KennzahlenTile({ kennzahlen }: Props) {
|
||||
function KennzahlenTileKomponente({ kennzahlen }: Props) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-4xl font-bold tabular-nums leading-none">{kennzahlen.anzahl_offener_fehlbestaende}</p>
|
||||
@@ -20,3 +22,5 @@ export function KennzahlenTile({ kennzahlen }: Props) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const KennzahlenTile = memo(KennzahlenTileKomponente);
|
||||
|
||||
Reference in New Issue
Block a user