Optimizing a List Component with React.memo and useCallback

Task: Optimize Component Re-renders

Your task is to identify and resolve unnecessary re-renders in a React application using performance optimization techniques. You have a ParentComponent that displays a list of Item components through an ItemList component. Currently, when the ParentComponent's state (e.g., a counter) updates, all Item components re-render, even if their props relevant to their rendering (like id or name) have not changed. This can lead to performance issues in larger applications.

Your goal is to apply appropriate React features to prevent these superfluous re-renders, ensuring that Item components only re-render when their actual props change, and the ItemList component also benefits from memoization.

Use console.log statements provided in the Item component to verify your solution by observing fewer logs when the parent component's state updates.