React.memo for Components

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

Without Memo

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

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

With Memo

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

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!