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 { Qualifikationsablauf } from "../types";
interface Props {
qualifikationsablaeufe: Qualifikationsablauf[];
}
export function QualifikationTile({ qualifikationsablaeufe }: Props) {
function QualifikationTileKomponente({ qualifikationsablaeufe }: Props) {
if (qualifikationsablaeufe.length === 0) {
return <p className="text-muted">Keine bald ablaufenden Qualifikationen.</p>;
}
@@ -24,3 +26,5 @@ export function QualifikationTile({ qualifikationsablaeufe }: Props) {
</ul>
);
}
export const QualifikationTile = memo(QualifikationTileKomponente);