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

В задаче требуется проанализировать, почему при изменении состояния происходит повторный рендер как родительского компонента, так и вложенного списка, и предложить способы оптимизации, чтобы избежать лишних выводов в консоль. Рассмотрите варианты мемоизации или использования 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>
  );
}