Create a Pure Component in React

Question

Create a Pure Component in React.

Answer

Class-based PureComponent

import React, { PureComponent } from 'react';

class UserCard extends PureComponent {
  render() {
    console.log('Rendered:', this.props.name);
    return <h3>{this.props.name}</h3>;
  }
}

✅ React re-renders only if the props or state change shallowly.

Functional equivalent with React.memo

import React from 'react';

const UserCard = React.memo(({ name }) => {
  console.log('Rendered:', name);
  return <h3>{name}</h3>;
});

✅ React.memo prevents re-render if props are the same (shallow comparison).

Real-World Example

• Avoid re-rendering identical list items
• Optimizing heavy UI sections
• Improving performance in large component trees

Quick Practice

Build a list of users and wrap each item in React.memo. Log renders to verify only updated items re-render.

Summary

Use React.PureComponent (class) or React.memo (function) to prevent unnecessary re-renders for performance optimization.