Могут ли пропсы измениться сами по себе? Как сделать так, чтобы компонент рендерился только при изменении пропсов?

Неизменяемость пропсов

Пропсы (props) в React являются неизменяемыми (immutable) данными, которые передаются от родительского компонента дочернему. Они не могут измениться внутри самого компонента — это фундаментальное правило React. Если пропсы выглядят изменившимися, это означает, что родительский компонент выполнил ререндер и передал новые значения.

Почему это важно

Неизменяемость гарантирует предсказуемость потока данных и упрощает отладку. Компонент всегда получает пропсы как входные данные и не должен их модифицировать. Если нужно изменить данные, это делается через состояние (state) или колбэки, переданные в пропсах.

Контроль ререндеров

По умолчанию React ререндерит компонент при любом изменении состояния или пропсов родителя. Чтобы оптимизировать производительность и рендерить компонент только при изменении его собственных пропсов, используйте:

• React.memo — для функциональных компонентов. Он запоминает результат рендера и выполняет поверхностное сравнение пропсов.
• shouldComponentUpdate — для классовых компонентов. Это метод жизненного цикла, который возвращает true или false, указывая, нужно ли обновлять компонент.

Пример с React.memo

import React from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log('Child rendered');
  return <div>Hello, {name}!</div>;
});

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <ChildComponent name="Alice" />
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
    </div>
  );
}

В этом примере ChildComponent обернут в React.memo. При нажатии на кнопку меняется только состояние count в родителе, но пропс name остается тем же. Благодаря React.memo дочерний компонент не ререндерится, что видно по отсутствию сообщения в консоли.

Пример с shouldComponentUpdate

class ChildComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.name !== this.props.name;
  }

  render() {
    console.log('Child rendered');
    return <div>Hello, {this.props.name}!</div>;
  }
}

Здесь shouldComponentUpdate сравнивает текущий пропс name с новым. Если они равны, метод возвращает false, и ререндер не происходит.

Вывод

Пропсы никогда не меняются сами по себе — это неизменяемые данные. Для предотвращения лишних ререндеров используйте React.memo или shouldComponentUpdate. Эти инструменты особенно полезны в больших приложениях с глубокой вложенностью компонентов, где оптимизация производительности критична.