A React single-page application becomes noticeably slow as the amount of client-side state grows. Describe how you would diagnose the performance problem, which tools and metrics you would use, and the concrete strategies you might apply to improve responsiveness.

When I notice a React SPA slowing down I first reproduce the problem in a controlled environment and collect metrics — FPS, Time to Interactive (TTI), JS main-thread CPU time, and memory. I use Chrome DevTools Performance and the React Profiler to find expensive renders and flame charts, plus Lighthouse to get a baseline (for example, I once saw TTI go from 900ms to 2.8s). If re-renders are the culprit I add why-did-you-render and measure props changes. Concrete fixes: split global state so only necessary components subscribe, memoize selectors with Reselect, useMemo/useCallback where helpful, and virtualize long lists with react-window. For heavy computations I offload to a web worker. I also apply code-splitting and lazy-loading to cut initial bundle size (reduced 800KB to 260KB in one project, cutting TTI by 1.2s). I validate with before/after metrics and aim for >50% CPU reduction on hot paths.