Какие компоненты перерендерятся при клике на кнопку и почему?

Как работает ререндер в React

Когда пользователь кликает на кнопку, вызывается обработчик события, который обновляет состояние через setState. React помечает компонент как 'грязный' и планирует ререндер. При ререндере React вызывает функцию компонента (или метод render для классовых компонентов) и сравнивает полученный виртуальный DOM с предыдущим.

Какие компоненты перерендерятся

• Компонент, в котором произошло изменение состояния, перерендеривается всегда.
• Все его дочерние компоненты также перерендериваются по умолчанию, даже если их пропсы не изменились.
• Если дочерний компонент обернут в React.memo или является PureComponent, он перерендерится только при изменении его пропсов.

Пример кода

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click</button>
      <Child />
    </div>
  );
}

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

В этом примере при клике на кнопку Parent перерендерится, но Child не перерендерится благодаря React.memo, так как его пропсы не изменились.

Вывод

Понимание механизма ререндера помогает оптимизировать производительность React-приложений, особенно при работе с большими деревьями компонентов. Используйте React.memo, useMemo и useCallback для предотвращения лишних ререндеров.