Optimizing your React Application
summary
Claim: React sites show worse real-user web vitals than peers, dropping from 36% to 34% “good” LCP/CLS rates among the top 1M. Evidence: field RUM analysis, profiler traces and examples from a media app. Tools and fixes actually used: replace heavy shared state with separated stores (Redux), measure with the profiler, apply react context rerenders everything caution, and throttle rerenders with react memo/useCallback/useMemo; useLayoutEffect and reserved image/iframe space reduce CLS, but interdependent data still causes layout thrashing unless restructured.
AI-written summary · about
chapters (10)
- 0:00React performance intro
- 3:12Web Vitals and React
- 12:01Real-world React perf
- 15:37Optimizing Cumulative Layout Shift in React
- 23:42Causes of layout shifts
- 31:52INP and React rendering
- 34:23React vs Vue rendering
- 37:56Fixing layout thrashing
- 40:44React memoization
- 47:05Q&A
related talks
34mOptimizing Performance in Large-Scale React & Node.js Applications
21mMaking Your React Apps Perform At Scale
27mProfiling and Optimizing Performance of React Applications
27mSlashing Performance Bottlenecks and Poor User Experience
26mLightning Fast React Apps
27mOptimizing the Critical Rendering Path in React
20mPerformance Anxiety with React: Track and increase speed of your apps
51mTips and tricks for optimizing your React application