По каким критериям React.memo решает, перерендеривать компонент или нет?

Question

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

YeaHub · Accepted Answer

React.memo — это инструмент оптимизации, который позволяет пропускать лишние рендеры компонентов.ОпределениеReact.memo — это HOC, который мемоизирует результат рендера функционального компонента на основе его пропсов.Как работает сравнениеПо умолчанию React:сравнивает пропсы по ссылкеиспользует Object.isне делает глубокого сравненияПример:const MyComponent = React.memo(function MyComponent({ value }) { return

{value}

; }); Если value — примитив и не изменился, рендер будет пропущен.Что считается изменениемРерендер произойдёт, если:изменился примитив (number, string, boolean)передан новый объектпередана новая функцияизменился keyПользовательская функция сравненияМожно передать собственный компаратор:React.memo(Component, (prevProps, nextProps) => { return prevProps.id === nextProps.id; }); Но:это усложняет кодможет быть дороже, чем сам рендерОграниченияReact.memo:не предотвращает рендер родителяне гарантирует ускорениеполезен только при дорогом рендереВыводReact.memo решает о перерендере на основе поверхностного сравнения пропсов. Эффективность зависит от стабильности передаваемых данных.