React.memo ist eine Komponente höherer Ordnung, die in React verwendet wird, um die Leistung zu optimieren, indem unnötiges erneutes Rendern funktionaler Komponenten verhindert wird. Dabei wird das Ergebnis einer Komponente gespeichert und nur dann erneut gerendert, wenn sich ihre Requisiten ändern. Dies ist nützlich für die Leistungsoptimierung in Funktionskomponenten, die mit denselben Requisiten dieselbe Ausgabe rendern.

Beispielverwendung:

import React from 'react';

const MyComponent = ({ count }) => {
  console.log('Component re-rendered');
  return 
Count: {count}
;
};

export default React.memo(MyComponent);

In diesem Beispiel wird MyComponent nur dann neu gerendert, wenn sich die Zählstütze ändert. Wenn die übergeordnete Komponente erneut gerendert wird, die Count-Requisite jedoch gleich bleibt, wird MyComponent nicht erneut gerendert, wodurch unnötige Berechnungen reduziert werden.

Standardmäßig führt React.memo einen oberflächlichen Vergleich von Requisiten durch, Sie können jedoch bei Bedarf auch eine benutzerdefinierte Vergleichsfunktion für tiefergehende Prüfungen bereitstellen:

const MyComponent = React.memo((props) => {
  /* component code */
}, (prevProps, nextProps) => {
  // return true if props are equal, false otherwise
  return prevProps.someValue === nextProps.someValue;
});

Dies kann die Leistung weiter optimieren, wenn Sie komplexere Requisitenstrukturen haben.