Что такое PureComponent и зачем он нужен?

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

class RegularComponent extends React.Component {
  // Без shouldComponentUpdate - всегда ререндерит
  render() {
    return <div>{this.props.value}</div>;
  }
}

class OptimizedComponent extends React.PureComponent {
  // Автоматически имеет shouldComponentUpdate
  // с поверхностным сравнением пропсов и состояния
  render() {
    return <div>{this.props.value}</div>;
  }
}

// Пример логики поверхностного сравнения
function shallowEqual(objA, objB) {
  if (objA === objB) return true;
  
  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }
  
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  
  if (keysA.length !== keysB.length) return false;
  
  for (let i = 0; i < keysA.length; i++) {
    if (!objB.hasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
      return false;
    }
  }
  
  return true;
}

// 1. Компоненты с примитивными пропсами
class UserInfo extends React.PureComponent {
  render() {
    return (
      <div>
        <h2>{this.props.name}</h2>
        <p>Возраст: {this.props.age}</p>
      </div>
    );
  }
}

// 2. Статические компоненты
class Header extends React.PureComponent {
  render() {
    return <header>{this.props.title}</header>;
  }
}

// 1. Компоненты с часто изменяющимися объектами/массивами
class UserList extends React.PureComponent {
  render() {
    // Плохо: users всегда новый массив
    return this.props.users.map(user => 
      <User key={user.id} user={user} />
    );
  }
}

// 2. Компоненты с функциями в пропсах
class Button extends React.PureComponent {
  render() {
    // Плохо: onClick всегда новая функция
    return <button onClick={this.props.onClick}>Click</button>;
  }
}

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

// С кастомной функцией сравнения
const MyComponent = React.memo(
  function MyComponent(props) {
    return <div>{props.value}</div>;
  },
  function areEqual(prevProps, nextProps) {
    // Возвращает true, если ререндер не нужен
    return prevProps.value === nextProps.value;
  }
);

// Плохо - создает новый объект каждый раз
this.setState({ user: { ...this.state.user, name: 'Новое имя' } });

// Лучше - если возможно, используйте примитивы
this.setState({ userName: 'Новое имя' });

// Плохо
class Parent extends Component {
  handleClick = () => { /* ... */ };
  
  render() {
    return <Child onClick={() => {}} />;
  }
}

// Хорошо
class Parent extends Component {
  handleClick = () => { /* ... */ };
  
  render() {
    return <Child onClick={this.handleClick} />;
  }
}