Challenge: Refactoring a Slow Comment Viewer App
The task involves refactoring a slow CommentViewer app in React, which suffers from performance issues such as excessive re-renders and heavy computations. Key steps include stabilizing props in App.js to ensure consistent filtering, optimizing CommentList.js to limit re-renders to meaningful changes, and enhancing StatsPanel.js by stabilizing selectors and deferring heavy computations. The goal is to achieve a responsive user experience with minimal unnecessary renders, ensuring smooth interactions during typing and data updates.
We'll cover the following...
Problem statement
You’ve been tasked with debugging a small React feature called CommentViewer, a compact UI that displays a list of user comments alongside a live analytics summary. The codebase is small, consisting of just three components: App, CommentList, and StatsPanel. Yet, users report noticeable lag when typing, filtering comments, or when new data arrives.
Upon inspecting the profiler, you notice several performance issues:
CommentListre-renders excessively, even though it is wrapped inReact.memo.StatsPanelperforms heavy computations on every keystroke.Appgenerates unstable derived props, forcing unnecessary work throughout the component tree. ...