🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
💡 Почему inline-пропсы отключают React.memo
React.memo пропускает повторный рендер только тогда, когда пропсы не изменились. Объекты и функции React сравнивает по ссылке через Object.is.
🔵 Поэтому такой код создаёт новые ссылки при каждом рендере родителя:
addToCart(id)}
/>
Даже если содержимое не изменилось, React.memo видит новые пропсы и снова рендерит ProductRow.
🔵 Статический объект лучше вынести за компонент:
const ROW_STYLE = { padding: 16 };
🔵 А колбэк, который передаётся в memoизированного потомка, стабилизировать через useCallback:
const handleAddToCart = useCallback((id) => {
addToCart(id);
}, []);
Но делать это для всех объектов и функций не нужно. Оптимизация имеет смысл, когда родитель часто обновляется, дочерний компонент достаточно тяжёлый и лишние рендеры подтверждены в React DevTools Profiler.
🔗 Ссылка на статью
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#under_hood