What is React.memo, how does it work, where is it applied and for what purpose?

Brief Answer

React.memo is a higher-order component that memoizes functional components, preventing unnecessary re-renders when props haven’t changed. It’s React’s built-in optimization tool for performance enhancement.

Syntax: const MemoizedComponent = React.memo(Component);

Key benefits:

• Prevents re-renders with identical props
• Improves performance in large component trees
• Works seamlessly with functional components
• Supports custom comparison functions

Simple example:

const UserCard = React.memo(function UserCard({ name, avatar }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <span>{name}</span>
    </div>
  );
});

Full Answer

React.memo is a powerful optimization technique that helps improve React application performance by preventing unnecessary re-renders of components with unchanged props. It’s particularly useful in large applications with complex component trees.

How React.memo Works

React.memo works by memoizing the result of a component’s render. When the parent component re-renders:

1. React compares the new props with previous props
2. If props are identical, it returns the memoized version
3. If props differ, it re-renders the component normally

Common Use Cases

Displaying Lists

Perfect for list items where individual items rarely change but the parent component re-renders frequently.

Expensive Components

Components with complex calculations or heavy rendering logic that benefit from caching.

Static UI Elements

Components that display static data and rarely receive new props.

Components with Primitive Props

Components that receive simple props like strings, numbers, or booleans.

Practical Implementation

// Simple memoization
const ProductItem = React.memo(function ProductItem({ title, price }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>${price}</p>
    </div>
  );
});
 
// With custom comparison
const TodoItem = React.memo(
  function TodoItem({ todo, onUpdate }) {
    return (
      <div>
        <input 
          type="checkbox" 
          checked={todo.completed}
          onChange={() => onUpdate(todo.id)}
        />
        <span>{todo.text}</span>
      </div>
    );
  },
  (prevProps, nextProps) => {
    // Custom comparison logic
    return (
      prevProps.todo.id === nextProps.todo.id &&
      prevProps.todo.completed === nextProps.todo.completed &&
      prevProps.todo.text === nextProps.todo.text
    );
  }
);

When to Use

✅ Best for:

• Components with static or infrequently changing props
• List items in large collections
• Expensive rendering components
• Pure components that render the same output for the same props

❌ Avoid for:

• Components with frequently changing complex objects
• Simple components with minimal rendering cost
• Components that depend on external state
• When props are objects that are recreated on each render

Key Advantages

1. Performance Boost — Eliminates unnecessary re-renders
2. Easy Implementation — Simple wrapper with minimal code changes
3. Flexible Comparison — Supports custom prop comparison logic
4. Seamless Integration — Works with existing React patterns

React.memo is an essential tool for React performance optimization. When used correctly, it can significantly improve application responsiveness by eliminating wasteful re-renders while maintaining code simplicity.

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪