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 { 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);
|
||||
|
||||
Reference in New Issue
Block a user