What is React.memo and when should you use it? How does it differ from useMemo and useCallback?

Question

Accepted Answer

## React.memo `React.memo` is a higher-order component that memoizes the rendered output of a component. It prevents re-renders when the props have not changed. ```javascript const MyComponent = React.memo(function MyComponent({ name, onClick }) { console.log('Rendering MyComponent'); return ; }); ``` If `name` and `onClick` remain the same between renders, the component will not re-render. ## useMemo `useMemo` memoizes a computed value. It recalculates only when its dependencies change. ```javascript function ExpensiveList({ items, filter }) { const filteredItems = useMemo(() => { console.log('Filtering items...'); return items.filter(item => item.includes(filter)); }, [items, filter]); return

{item}

; } ``` **Use case**: Expensive calculations that should not run on every render. ## useCallback `useCallback` memoizes a function reference. It returns the same function instance as long as dependencies have not changed. ```javascript function Parent() { const [count, setCount] = useState(0); // Without useCallback, a new function is created on every render. const handleClick = useCallback(() => { console.log('Button clicked'); }, []); // Empty array means function never changes return ( <> ); } ``` **Use case**: Passing callbacks to memoized child components. ## Comparison Table | Tool | What It Memoizes | Use Case | |------|------------------|----------| | `React.memo` | Component output | Prevent unnecessary re-renders | | `useMemo` | Computed value | Expensive calculations | | `useCallback` | Function reference | Stable callbacks for children | ## When to Use Each ```javascript // React.memo: Wrap components that receive the same props frequently. const MemoizedList = React.memo(List); // useMemo: Cache expensive computations. const sortedData = useMemo(() => sortData(data), [data]); // useCallback: Stabilize functions passed to memoized children. const handleSubmit = useCallback(() => { submitForm(formData); }, [formData]); ``` ## When NOT to Use - **Do not overuse memoization.** It adds overhead and can make code harder to read. - **Only optimize when you have measured a performance problem.** - **Primitive props do not need useCallback** since they are compared by value.