React.memo prevents component re-renders when props are unchanged. useMemo caches computed values. useCallback caches function references. Use them only when you have measured performance issues - premature optimization adds complexity without benefit.
React.memo:
useMemo:
useCallback:
When to Use:
// Memoized component - only re-renders if props change
const ExpensiveList = React.memo(function ExpensiveList({ items, onItemClick }) {
console.log('ExpensiveList rendered');
return (
<ul>
{items.map(item => (
<li key={item.id} onClick={() => onItemClick(item)}>
{item.name}
</li>
))}
</ul>
);
});
// With custom comparison
const UserCard = React.memo(
function UserCard({ user, theme }) {
return (
<div className={theme}>
{user.name}
</div>
);
},
(prevProps, nextProps) => {
// Return true if props are equal (skip re-render)
// Return false to re-render
return prevProps.user.id === nextProps.user.id &&
prevProps.theme === nextProps.theme;
}
);