1
2
3
4
5
6
Use the "Verify Solution" button to get AI feedback on your React code.
You are tasked with optimizing a React functional component, LargeListComponent, which renders a list of 1000 ListItem components. Currently, every time an unrelated state within LargeListComponent changes (e.g., a simple counter), all ListItem components unnecessarily re-render. This behavior can lead to significant performance bottlenecks, especially with larger lists or more complex item renderings. Your goal is to apply appropriate React memoization techniques to ensure that ListItem components only re-render when their item or onClick props have actually changed, thereby improving the application's performance and responsiveness.