React.memo — это компонент более высокого порядка, используемый в React для оптимизации производительности за счет предотвращения ненужного повторного рендеринга функциональных компонентов. Он работает, запоминая результат работы компонента и перерисовывая его только в том случае, если его реквизиты изменяются. Это полезно для оптимизации производительности функциональных компонентов, которые отображают один и тот же вывод с использованием одних и тех же реквизитов.

Пример использования:

import React from 'react';

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

export default React.memo(MyComponent);

В этом примере MyComponent будет выполнять повторную визуализацию только в том случае, если изменится свойство count. Если родительский компонент выполняет повторную визуализацию, но свойство count остается прежним, MyComponent не будет выполнять повторную визуализацию, что сокращает ненужные вычисления.

По умолчанию React.memo выполняет поверхностное сравнение реквизитов, но при необходимости вы также можете предоставить собственную функцию сравнения для более глубоких проверок:

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

Это может еще больше оптимизировать производительность при наличии более сложных структур реквизита.