Optimizing Functional Components with React.memo

React.memo is a powerful performance optimization tool that prevents unnecessary re-renders of functional components. Here’s how to use it effectively to boost your application’s performance.

The Problem: Unnecessary Re-renders

// ❌ Without React.memo - re-renders when parent updates
function UserProfile({ name, age }) {
  console.log('UserProfile rendering'); // Logs too often
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

Basic Usage of React.memo

// ✅ With React.memo - only re-renders when props change
const UserProfile = React.memo(function UserProfile({ name, age }) {
  console.log('UserProfile rendering'); // Only logs when props change
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
});

When to Use React.memo

1. Pure functional components that always render the same output for the same props
2. Components that render often with the same props
3. Components that are expensive to render (complex calculations or large subtrees)
4. Components that receive stable props but their parents re-render frequently

Custom Comparison Function

For more control over re-renders, provide a custom comparison function:

const UserProfile = React.memo(
  function UserProfile({ user, onUpdate }) {
    return (
      <div>
        <h2>{user.name}</h2>
        <button onClick={() => onUpdate(user.id)}>Update</button>
      </div>
    );
  },
  // Custom comparison function
  (prevProps, nextProps) => {
    // Only re-render if user data changed
    return prevProps.user.id === nextProps.user.id &&
           prevProps.user.name === nextProps.user.name;
  }
);

Common Pitfalls and Solutions

1. Unstable Props

// ❌ Problem - inline function creates new reference each render
<UserProfile 
  user={user}
  onUpdate={(id) => updateUser(id)} 
/>

// ✅ Solution - stabilize with useCallback
const handleUpdate = useCallback((id) => updateUser(id), []);
<UserProfile user={user} onUpdate={handleUpdate} />

2. Unnecessary Memoization

// ❌ Overuse - simple components don't always need memo
const SimpleButton = React.memo(({ text }) => (
  <button>{text}</button>
));

// ✅ Better - only memoize when proven beneficial
const SimpleButton = ({ text }) => <button>{text}</button>;

3. Incorrect Prop Comparison

// ❌ Problem - shallow comparison misses object changes
const UserProfile = React.memo(({ user }) => { ... });

// ✅ Solution - custom comparison or flatten props
const UserProfile = React.memo(
  ({ userId, userName }) => { ... },
  (prev, next) => prev.userId === next.userId && prev.userName === next.userName
);

Performance Optimization Patterns

1. Combined with useCallback

const UserEditor = React.memo(({ user, onSave }) => {
  // Component implementation
});

function Parent() {
  const [user, setUser] = useState(initialUser);
  const handleSave = useCallback(
    (updatedUser) => saveToAPI(updatedUser),
    []
  );

  return <UserEditor user={user} onSave={handleSave} />;
}

2. Memoizing Multiple Children

const UserList = React.memo(({ users, onSelect }) => (
  <ul>
    {users.map(user => (
      <UserItem 
        key={user.id}
        user={user}
        onSelect={onSelect}
      />
    ))}
  </ul>
));

const UserItem = React.memo(({ user, onSelect }) => (
  <li onClick={() => onSelect(user.id)}>
    {user.name}
  </li>
));

When Not to Use React.memo

1. Components that always receive new props (memoization provides no benefit)
2. Very simple components where memoization overhead outweighs benefits
3. Components that need to re-render frequently with prop changes
4. Cases where you want to intentionally re-render

Best Practices

1. Measure first – Use React DevTools to identify actual performance issues
2. Memoize judiciously – Focus on components that really benefit
3. Combine with useMemo/useCallback for complete optimization
4. Test with and without to verify improvements
5. Consider component boundaries – Sometimes splitting components is better than memo

Remember that React.memo is a performance optimization tool, not a semantic guarantee. Use it strategically where you can demonstrate measurable performance improvements.