Improve component rendering efficiency

The task requires analyzing why both the parent component and the nested list re-render when the state changes, and suggesting optimization methods to avoid unnecessary console outputs. Consider options like memoization or using React.memo.

function List() {
  console.log('RENDER LIST');
  return <div>List component</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>
  );
}