Utilize memoization for performance optimization

[pushoo-sharma]

Description: We aim to optimize the rendering performance of our React application by leveraging memoization. Currently, we're experiencing unnecessary re-renders in child components (Item) when their values are updated. To address this issue, we propose the following solution:

Solution #1: Use memo

[pushoo-sharma]

The Item component is wrapped with React's memo function, which is intended to optimize the rendering performance by preventing unnecessary re-renders when the props passed to the component remain the same.

However, even though Item is memoized, it may still re-render when one of its children's values is updated. This behavior occurs because the Item component's props include not only its own value but also the onChange function passed from the parent (App). When the onChange function reference changes (even if its behavior remains the same), React treats it as a new prop, causing the memoized Item component to re-render.