perf(dashboard): React-Review - Memoization, stabile Callbacks, Key-Fixes
CI / backend-tests (push) Failing after 2m4s
CI / frontend-build (push) Successful in 20s

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:
2026-09-07 13:27:36 +02:00
co-authored by Claude Sonnet 5
parent 726d6e29b1
commit 0c448c7ff7
11 changed files with 223 additions and 52 deletions
@@ -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);