💡 Почему inline-пропсы отключают React.memo

React.memo пропускает повторный рендер только тогда, когда пропсы не изменились. Объекты и функции React сравнивает по ссылке через Object.is.

🔵 Поэтому такой код создаёт новые ссылки при каждом рендере родителя:

<ProductRow
  style={{ padding: 16 }}
  onAddToCart={(id) => addToCart(id)}
/>

Даже если содержимое не изменилось, React.memo видит новые пропсы и снова рендерит ProductRow.

🔵 Статический объект лучше вынести за компонент:

const ROW_STYLE = { padding: 16 };

🔵 А колбэк, который передаётся в memoизированного потомка, стабилизировать через useCallback:

const handleAddToCart = useCallback((id) => {
  addToCart(id);
}, []);

Но делать это для всех объектов и функций не нужно. Оптимизация имеет смысл, когда родитель часто обновляется, дочерний компонент достаточно тяжёлый и лишние рендеры подтверждены в React DevTools Profiler.

🔗 Ссылка на статью

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#under_hood