Как работает React.memo?

Question

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

YeaHub · Accepted Answer

По умолчанию React перерендеривает компонент каждый раз, когда перерендеривается его родитель.ОпределениеReact.memo — это HOC, который запоминает результат рендера компонента и повторно использует его, если входные props не изменились.Как работает сравнениеReact:сравнивает предыдущие и новые propsиспользует поверхностное сравнениепроверяет ссылки, а не содержимое объектовconst User = React.memo(function User({ name }) { return {name}; }); Пользовательская функция сравненияМожно передать свою функцию сравнения:React.memo(Component, (prevProps, nextProps) => { return prevProps.id === nextProps.id; }); Когда React.memo не помогаетОптимизация не сработает, если:в props передаются новые объекты или функцииродитель создаёт значения на каждом рендереКогда использоватьReact.memo полезен, если:компонент часто перерендериваетсярендер дорогойprops редко меняютсяКраткий выводReact.memo снижает количество перерендеров за счёт мемоизации, но эффективен только при стабильных props.