Zuerst messen Sie, dann beheben Sie die eigentliche Ursache — sprenkeln Sie nicht überall useMemo auf Vermutung hin.
Verwenden Sie den React DevTools Profiler (aktivieren Sie "Highlight updates when components render"). Er zeigt, welche Komponenten erneut gerendert wurden und warum (Props haben sich geändert, State hat sich geändert, Parent wurde gerendert, Context hat sich geändert).
1. Neue object/array/function Props bei jedem Render besiegen React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context-Wert wird bei jedem Render neu erstellt → alle Consumer rendern erneut. Memoisieren Sie den value oder teilen Sie Kontexte auf.
3. State zu hoch platziert. State so niedrig zu halten, dass weniger Komponenten davon abhängen, ist oft der größte Gewinn:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Teure Arbeit beim Rendering → wickeln Sie sie in useMemo ein.
Re-Renders sind meist billig — React ist schnell. Die meisten "Optimierungen" fügen Komplexität ohne messbaren Nutzen hinzu. Bevorzugen Sie strukturelle Lösungen (Zusammenlegung von State, List Virtualization für Tausende von Zeilen) gegenüber dem Verteilen von Memos überall. Optimieren Sie die spezifischen Hotspots, die der Profiler offenbart, und messen Sie erneut, um zu bestätigen, dass die Korrektur tatsächlich geholfen hat.