React.memo & Optimization in React
From the React Components & JSX cheat sheet · Optimization & Advanced Features · verified Jul 2026
React.memo & Optimization
Optimize component re-renders with memoization
javascript
// React.memo
const ExpensiveComponent = React.memo(function Component({ data }) {
return <div>{data.value}</div>
})
// Custom comparison
const MyComponent = React.memo(Component, (prevProps, nextProps) => {
// Return true if props are equal (skip re-render)
return prevProps.id === nextProps.id
})⚡ React 19's compiler auto-memoizes - reach for manual memo/useMemo/useCallback only when profiling shows a real need
⚛️ React.memo skips re-renders when props are unchanged
💡 useMemo caches expensive computations; useCallback stabilizes function identity
⚠️ Profile before optimizing - premature memoization hurts maintainability