Помогает ли PureComponent с оптимизацией

Что такое PureComponent в React

PureComponent — это базовый класс для компонентов, который автоматически реализует поверхностное сравнение props и state. Это помогает избежать лишних рендеров, но нужно понимать его ограничения.

Как работает PureComponent

PureComponent переопределяет метод shouldComponentUpdate() и сравнивает старые и новые props/state:

// React делает именно это внутри PureComponent
shouldComponentUpdate(nextProps, nextState) {
  return (
    !shallowEqual(this.props, nextProps) ||
    !shallowEqual(this.state, nextState)
  );
}

Это означает:

• Если props/state не изменились по ссылке → компонент НЕ перерендерится
• Если props/state изменились → компонент перерендерится

Примеры использования

Правильное использование — примитивные значения

import React from 'react';

class UserCard extends React.PureComponent {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
        <p>Email: {this.props.email}</p>
      </div>
    );
  }
}

// Оптимизирует кол-во рендеров
const parent = () => {
  const [count, setCount] = React.useState(0);
  const name = 'John';
  const age = 30;
  const email = 'john@example.com';

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <UserCard name={name} age={age} email={email} />
      {/* PureComponent не перерендерится, если name/age/email не изменились */}
    </>
  );
};

Проблема — объекты и массивы

class UserList extends React.PureComponent {
  render() {
    return (
      <ul>
        {this.props.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

// ПРОБЛЕМА: PureComponent не сработает
const App = () => {
  const [count, setCount] = React.useState(0);
  const users = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ];

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* UserList перерендерится каждый раз,
          потому что users — это НОВЫЙ объект каждый раз */}
      <UserList users={users} />
    </>
  );
};

Правильное решение — мемоизировать

const App = () => {
  const [count, setCount] = React.useState(0);
  
  // Мемоизируем users, чтобы он не пересоздавался
  const users = React.useMemo(() => [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ], []);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* Теперь UserList не перерендерится */}
      <UserList users={users} />
    </>
  );
};

Сравнение с React.memo

Для функциональных компонентов используй React.memo:

// Функциональный компонент с мемоизацией
const UserCard = React.memo(({ name, age, email }) => (
  <div>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
    <p>Email: {email}</p>
  </div>
));

// Полностью аналогично PureComponent
// Но более современный подход

PureComponent vs memo

// Старый способ — класс с PureComponent
class OldUserCard extends React.PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

// Новый способ — функция с React.memo
const NewUserCard = React.memo(({ name }) => (
  <div>{name}</div>
));

// Они работают одинаково

Когда помогает PureComponent?

1. Много дочерних компонентов

class UserList extends React.PureComponent {
  render() {
    return (
      <div>
        {this.props.users.map(user => (
          <UserCard key={user.id} user={user} />
        ))}
      </div>
    );
  }
}

// Если users не изменился — все UserCard не перерендерятся

2. Сложные вычисления

class DataDisplay extends React.PureComponent {
  render() {
    // Дорогое вычисление
    const processedData = this.props.data.map(item => ({
      ...item,
      processed: expensiveCalculation(item)
    }));

    return <div>{JSON.stringify(processedData)}</div>;
  }
}

// Если props не изменился — вычисление не запустится

Когда НЕ помогает PureComponent?

1. Объекты/массивы — всегда новые по ссылке
2. Функции в props — каждый раз пересоздаются
3. Изменяемые объекты — меняются по ссылке, сравнение не поймёт

// Плохо — функция пересоздаётся каждый раз
class Parent extends React.Component {
  render() {
    return (
      <Child onClick={() => console.log('clicked')} />
      {/* Child всегда перерендерится */}
    );
  }
}

// Хорошо — функция стабильна
class Parent extends React.Component {
  handleClick = () => console.log('clicked');

  render() {
    return <Child onClick={this.handleClick} />;
  }
}

Вывод

PureComponent помогает оптимизировать компоненты с примитивными props. Для объектов/массивов нужна дополнительная мемоизация. В современных проектах используй React.memo с функциональными компонентами — это проще и понятнее.