Optimizing re-renders with React.memo and useCallback

Scenario

Context A large dashboard renders a list of 200 rows. Each row contains an action button tied to a callback defined in the parent. The Problem Every state change in the parent causes all 200 row components to re-render, even when their data has not changed, causing visible UI lag. Constraints Wrap the row component with React.memo to skip unnecessary re-renders. Stabilize the callback reference using useCallback with correct dependencies. Verify the optimization using React DevTools Profiler. Expected Deliverable A React implementation demonstrating React.memo and useCallback working together to prevent unnecessary child re-renders, with an explanation of the dependency array choices.

Targeted skills