> Как реализовать shouldComponentUpdate в React (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Инрэко

Стек: React

> Пример ответа

shouldComponentUpdate - это метод жизненного цикла классового компонента React, который позволяет оптимизировать рендеринг, предотвращая ненужные обновления. Он вызывается перед рендерингом, когда компонент получает новые пропсы или состояние, и возвращает true (обновить) или false (пропустить обновление).

Пример реализации:

JSX
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Сравниваем текущие пропсы с новыми
    if (this.props.value !== nextProps.value) {
      return true; // обновляем, если изменилось
    }
    // Сравниваем текущее состояние с новым
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false; // иначе пропускаем рендер
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

Для функциональных компонентов аналогом служит React.memo, который по умолчанию выполняет поверхностное сравнение пропсов:

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

Ключевые моменты:

Используйте shouldComponentUpdate для избежания лишних ререндеров, особенно в больших списках или компонентах с тяжелым рендерингом.
Избегайте глубоких сравнений объектов внутри метода - это может снизить производительность. Вместо этого используйте иммутабельные данные.
В современных проектах чаще применяют React.memo или PureComponent (классовый аналог с встроенным поверхностным сравнением).