Was macht React.memo und wann ist seine Verwendung sinnvoll?

Question

Accepted Answer

`React.memo` umhüllt eine Komponente, sodass sie **das Re-Rendering überspringt, wenn ihre Props shallow-equal mit dem vorherigen Render sind**. Standardmäßig wird eine untergeordnete Komponente jedes Mal neu gerendert, wenn die Elternkomponente neu gerendert wird; `memo` unterbricht dies, wenn sich die Props tatsächlich nicht geändert haben. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## Warum es wichtig ist `memo` führt einen **shallow** Vergleich durch. Wenn die Elternkomponente bei jedem Render ein neues Objekt/Array/eine neue Funktion übergibt, schlägt der Vergleich immer fehl und `memo` bewirkt nichts: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Beheben Sie das durch Stabilisierung der Funktion mit `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Wann es sich lohnt - Eine Komponente wird **oft** mit den **gleichen** Props gerendert und ihr Rendering ist nicht-trivial (große Listen, teure Unterbäume). ## Wann nicht - Die meisten Komponenten sind günstig; der Vergleich selbst hat einen Kostenfaktor, und das Umhüllen von allem fügt Komplexität ohne Gewinn hinzu. **Profilieren Sie zuerst** mit dem React DevTools Profiler, dann memoisieren Sie die bewiesenen Hotspots — memoisieren Sie nicht blind.