Understanding React.memo for Performance Optimization

When building React applications, performance becomes crucial as your app grows. One common performance issue is unnecessary component re-renders. This is where React.memo comes to the rescue.

What is React.memo?

React.memo is a higher-order component that memoizes your functional component. In simple terms, it remembers the rendered output of your component and only re-renders if the props change. This prevents unnecessary renders when the props remain the same.

How React.memo Works

By default, React components re-render whenever:

1. Their state changes
2. Their parent component re-renders

React.memo changes this behavior by comparing the current props with the previous props. If the props are the same, React skips the re-render and reuses the last rendered result.

Basic Example

Let's look at a simple example without React.memo:

// ChildComponent.js - Without React.memo
function ChildComponent({ name }) {
  console.log("ChildComponent rendered");
  return <div>Hello, {name}</div>;
}

// ParentComponent.js
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <ChildComponent name="John" />
    </div>
  );
}

In this example, every time you click the button, both ParentComponent and ChildComponent re-render, even though the name prop doesn't change.

Now, let's add React.memo:

// ChildComponent.js - With React.memo
const ChildComponent = React.memo(function ChildComponent({ name }) {
  console.log("ChildComponent rendered");
  return <div>Hello, {name}</div>;
});

// The rest of the code remains the same

Now, ChildComponent only renders once initially. When you click the button, ParentComponent re-renders but ChildComponent doesn't because its props haven't changed.

When to Use React.memo

Use React.memo when:

1. Your component renders often with the same props
2. The rendering is expensive (complex calculations or heavy UI)
3. The component is pure (same props always produce same output)

When NOT to Use React.memo

Avoid React.memo when:

1. The component is simple and cheap to render
2. The props change frequently
3. You're already using other optimization techniques

Custom Comparison Function

React.memo accepts a second argument - a custom comparison function:

const ChildComponent = React.memo(
  function ChildComponent({ user, age }) {
    return (
      <div>
        Name: {user.name}, Age: {age}
      </div>
    );
  },
  function areEqual(prevProps, nextProps) {
    // Only re-render if user ID or age changes
    return (
      prevProps.user.id === nextProps.user.id &&
      prevProps.age === nextProps.age
    );
  }
);

Real-World Example

Here's a practical example with a user list:

// UserItem.js - Optimized with React.memo
const UserItem = React.memo(function UserItem({ user, onSelect }) {
  console.log(`Rendering user: ${user.name}`);
  
  return (
    <li onClick={() => onSelect(user.id)}>
      <div>{user.name}</div>
      <div>{user.email}</div>
    </li>
  );
});

// UsersList.js
function UsersList({ users, selectedUserId }) {
  const handleSelect = useCallback((userId) => {
    console.log(`User selected: ${userId}`);
  }, []);
  
  return (
    <ul>
      {users.map((user) => (
        <UserItem
          key={user.id}
          user={user}
          onSelect={handleSelect}
        />
      ))}
    </ul>
  );
}

Notice we also used useCallback for the handleSelect function. This is important because without it, a new function would be created on every render, causing React.memo to think the props changed.

Interview Questions and Answers on React.memo

1. What is React.memo and why is it used?

Answer: React.memo is a higher-order component that memoizes functional components. It prevents unnecessary re-renders by comparing current props with previous props. If the props haven't changed, React reuses the previously rendered output. This improves performance by reducing the number of renders in your application.

2. What's the difference between React.memo and PureComponent?

Answer: React.memo is for functional components while PureComponent is for class components. Both serve the same purpose - preventing unnecessary re-renders by shallow comparing props. React.memo can also accept a custom comparison function as a second argument for more control over when to re-render.

3. When should you use React.memo?

Answer: You should use React.memo when:

• The component renders often with the same props
• The rendering is expensive or complex
• The component is pure (same input produces same output)
• The component doesn't depend on frequently changing context

4. When should you avoid using React.memo?

Answer: Avoid React.memo when:

• The component is simple and cheap to render
• Props change frequently (memoization overhead might outweigh benefits)
• The component uses useContext with frequently changing values
• You're already using other optimization techniques that cover the same optimization

5. How does React.memo compare props by default?

Answer: By default, React.memo does a shallow comparison of props. This means it compares each prop value using Object.is comparison. For primitive values (strings, numbers), it checks if they're equal. For objects and arrays, it checks if they reference the same object in memory, not if their contents are equal.

6. How can you implement custom comparison in React.memo?

Answer: You can pass a second argument to React.memo - a comparison function that receives prevProps and nextProps and returns true if they're equal (meaning don't re-render) or false if they're different (meaning do re-render).

const MyComponent = React.memo(
  (props) => { /* component logic */ },
  (prevProps, nextProps) => {
    // Return true if props are equal (skip re-render)
    // Return false if props are different (do re-render)
  }
);

7. What is the relationship between React.memo and useMemo?

Answer: React.memo memoizes an entire component based on its props, while useMemo memoizes a specific value within a component. React.memo prevents component re-renders, while useMemo prevents expensive recalculations. They can be used together for optimal performance.

8. Why might React.memo not work as expected?

Answer: React.memo might not work if:

• You're passing new object/array/function references as props on every render
• The component uses useContext with changing values
• You have side effects that trigger re-renders
• The component has internal state that changes

9. How does React.memo handle function props?

Answer: React.memo treats function props like any other prop - it does a referential equality check. If you pass a new function on every render (like an inline arrow function), React.memo will think the props changed. To fix this, use useCallback to memoize the function.

10. What's the performance cost of using React.memo?

Answer: React.memo adds a small overhead for prop comparison on every render. However, this cost is usually much smaller than the cost of re-rendering a complex component. The trade-off is beneficial when the component is expensive to render or renders frequently with the same props.

11. Can React.memo be used with components that have children?

Answer: Yes, React.memo can be used with components that accept children. However, remember that children are also props. If children change or if children components re-render, the memoized parent component might still re-render depending on how you handle the children prop.

12. What are alternatives to React.memo for performance optimization?

Answer: Alternatives include:

• useMemo for memoizing values
• useCallback for memoizing functions
• Code splitting with React.lazy
• Virtualization for long lists
• Optimizing state updates to avoid unnecessary changes
• Using the key prop effectively in lists

Key Takeaways

1. React.memo is a performance optimization tool, not a default approach
2. It only shallow compares props by default
3. Always measure performance before and after adding React.memo
4. Combine React.memo with useCallback and useMemo for best results
5. Don't over-optimize - simple components don't need React.memo

Remember: The best optimization is often writing cleaner code and proper state management. Use React.memo strategically where you have measured actual performance issues.