React.memo est un composant d'ordre supérieur utilisé dans React pour optimiser les performances en empêchant les nouveaux rendus inutiles des composants fonctionnels. Il fonctionne en mémorisant le résultat d'un composant et en le restituant uniquement si ses accessoires changent. Ceci est utile pour l'optimisation des performances des composants fonctionnels qui restituent le même résultat avec les mêmes accessoires.

Exemple d'utilisation :

import React from 'react';

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

export default React.memo(MyComponent);

Dans cet exemple, MyComponent ne sera restitué que si la prop count change. Si le composant parent est restitué mais que la prop count reste la même, MyComponent ne sera pas restitué, ce qui réduit les calculs inutiles.

Par défaut, React.memo effectue une comparaison superficielle des accessoires, mais vous pouvez également fournir une fonction de comparaison personnalisée pour des vérifications plus approfondies si nécessaire :

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

Cela peut optimiser davantage les performances lorsque vous disposez de structures d'accessoires plus complexes.