React.memo for Components

React.memo prevents re-renders when props haven't changed.

Without Memo

```javascript function Child({ name }) { console.log('Child rendered'); return <div>{name}</div>; }

// Re-renders even if name hasn't changed ```

With Memo

```javascript import { memo } from 'react';

const Child = memo(function Child({ name }) { console.log('Child rendered'); return <div>{name}</div>; });

// Only re-renders when name changes ```

Custom Comparison

```javascript const Child = memo(function Child({ user }) { return <div>{user.name}</div>; }, (prevProps, nextProps) => { return prevProps.user.id === nextProps.user.id; }); ```

Remember

- Wrap functional components - Shallow comparison by default - Use with useCallback

> Next: Learn error boundaries!