Tutorials › React Modern Development › React.memo

React.memo

5 min read

React.memo skips re-rendering when props have not changed. It does a shallow comparison of all props. Combine with useMemo and useCallback to ensure stable object and function references. Profile first before adding.

React.memo — Skip Re-renders

import { memo } from "react";

// Only re-renders when props change
const UserCard = memo(function UserCard({ user }) {
  return (
    
      {user.name}
      {user.email}
    
  );
});

// Custom comparison
const Card = memo(Component, (prev, next) => {
  return prev.id === next.id;
});

← Error Boundaries Next: Portals →

Quick Access

React.memo

React.memo — Skip Re-renders

{user.name}