React.memo — это компонент высшего порядка, которая оптимизирует функциональные компоненты, предотвращая ненужные перерисовки, когда их пропсы остаются неизменными.
React.memo работает похоже на PureComponent и shouldComponentUpdate в классовых компонентах, но специально разработана для функциональных компонентов. Она выполняет поверхностное сравнение пропсов и запускает перерисовку только когда значения пропсов действительно меняются.
const MyComponent = React.memo(function MyComponent(props) {
/* перерисовывается только если изменились пропсы */
return <div>{props.message}</div>;
});
Используй React.memo когда:
const MyComponent = React.memo(
MyComponent,
(prevProps, nextProps) => prevProps.id === nextProps.id
);
React.memo выполняет поверхностное сравнение props, то есть сравнивает идентичность ссылок вложенных объектов, а не их внутренние значения.
Новый — ещё не проверен сообществом
Вы