Что делает React.memo и когда его стоит использовать?

Question

Accepted Answer

`React.memo` оборачивает компонент, чтобы **пропустить повторный рендер, если его props shallow-equal** по сравнению с предыдущим рендером. По умолчанию дочерний компонент перерендивается всякий раз, когда это делает родитель; `memo` это предотвращает, когда props на самом деле не изменились. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## Подвох: нужны стабильные props `memo` выполняет **поверхностное** сравнение. Если родитель передает новый объект/массив/функцию при каждом рендере, сравнение всегда не удается и `memo` ничего не делает: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Исправьте, стабилизировав функцию с помощью `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Почему это важно - Компонент рендится **часто** с **теми же** props и его рендер нетривиален (большие списки, дорогие поддеревья). ## Когда это не имеет смысла - Большинство компонентов дешевые; само сравнение имеет стоимость, а оборачивание всего добавляет сложность без выигрыша. **Сначала профилируйте** с помощью React DevTools Profiler, а затем мемоизируйте проверенные горячие точки — не мемоизируйте вслепую.