Using React.memo and PureComponent

1. Introduction

Performance optimization is a critical aspect of React development. React.memo and PureComponent are tools that help minimize unnecessary re-renders, thereby improving application performance.

2. React.memo

2.1 What is React.memo?

React.memo is a higher-order component that memoizes the result of a functional component. It prevents re-rendering of the component if the props haven't changed.

2.2 When to Use React.memo

When a component renders the same output given the same props.
When a component is expensive to render.
When there are frequent updates to parent components that do not affect child components.

2.3 Example of React.memo


const MyComponent = React.memo(({ name }) => {
    console.log("Rendering:", name);
    return Hello, {name}!;
});

// Usage

Note: React.memo performs a shallow comparison of props by default. For complex objects, you may need to provide a custom comparison function.

3. PureComponent

3.1 What is PureComponent?

PureComponent is a base class for React components that implements a shallow prop and state comparison in its shouldComponentUpdate lifecycle method. It is used to optimize class components.

3.2 When to Use PureComponent

When you want to avoid re-rendering of class components with unchanged props or state.
When performance is a concern in your class components.

3.3 Example of PureComponent


class MyPureComponent extends React.PureComponent {
    render() {
        console.log("Rendering:", this.props.name);
        return Hello, {this.props.name}!;
    }
}

// Usage

Warning: Be cautious when using PureComponent with complex data types, as shallow comparison may lead to unexpected behavior.

4. Best Practices

Use React.memo for functional components and PureComponent for class components.
Keep components small and focused to maximize the effectiveness of memoization.
Consider using custom comparison functions when dealing with complex props.
Perform profiling to identify performance bottlenecks before applying optimizations.

5. FAQ

What is the difference between React.memo and PureComponent?

React.memo is used for functional components, while PureComponent is for class components. Both optimize rendering by preventing unnecessary updates.

Can I use React.memo with class components?

No, React.memo is specifically designed for functional components. Use PureComponent for class components.

When should I avoid using React.memo or PureComponent?

Avoid using them if the component frequently receives new props that change on every render or if the component is not performance-sensitive.