Challenge: Refactoring a Slow Comment Viewer App

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:

• CommentList re-renders excessively, even though it is wrapped in React.memo.

• StatsPanel performs heavy computations on every keystroke.

• App generates unstable derived props, forcing unnecessary work throughout the component tree. ...