Улучшить эффективность рендеринга компонента

Условие

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

function List() {
  console.log('RENDER LIST');
  return <div>Компонент лист</div>;
}

export default function App() {
  const [state, setState] = useState(0);
  console.log('RENDER APP');
  return (
    <div>
      <h1>{state}</h1>
      <button onClick={() => setState(state + 1)}>INCREMENT</button>
      <List />
    </div>
  );
}

Ответ

Без автоматической оптимизации обновление state вызывает App и обычный дочерний List. Оберните List в React.memo: при неизменных props его повторный рендер обычно можно пропустить.

import { memo, useState } from 'react';
const List = memo(function List() {
  console.log('RENDER LIST');
  return <div>Компонент лист</div>;
});

Объявляйте мемоизированный компонент вне App, сохранив остальной JSX. У List нет props, поэтому увеличение родительского счётчика не требует обновлять его содержимое. Собственное состояние или используемый контекст всё равно вызовут рендер. memo — оптимизация, не гарантия определённого количества логов; development Strict Mode и React Compiler могут менять наблюдаемую картину.