React.memo é um componente de ordem superior usado no React para otimizar o desempenho, evitando novas renderizações desnecessárias de componentes funcionais. Ele funciona memorizando o resultado de um componente e somente renderizando-o novamente se seus adereços mudarem. Isso é útil para otimização de desempenho em componentes funcionais que renderizam a mesma saída com os mesmos adereços.

Exemplo de uso:

import React from 'react';

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

export default React.memo(MyComponent);

Neste exemplo, MyComponent só será renderizado novamente se a propriedade count for alterada. Se o componente pai for renderizado novamente, mas a propriedade count permanecer a mesma, MyComponent não será renderizado novamente, reduzindo cálculos desnecessários.

Por padrão, React.memo realiza uma comparação superficial de adereços, mas você também pode fornecer uma função de comparação personalizada para verificações mais profundas, se necessário:

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

Isso pode otimizar ainda mais o desempenho quando você tem estruturas de suporte mais complexas.