React Component Profiling

on YouTube ↗16m

" summary

War story of shaving a page from 3.4s to 140ms: uses the Chrome React Profiler to find three real culprits — a 10MB Date‑holidays library replaced by a 73‑line implementation (saved ~1s), nested loops over a full Redux store that were restricted to needed items, and costly per‑button session lookups fixed with simple caching — then applied reselect + useMemo + memo to cache per‑month computations and component output, yielding consistent ~140ms renders.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 1:06React Profiler basics
3. 3:34Flame graph vs ranked display
4. 4:16Fixing invoice list bottleneck
5. 5:41Nested loops performance issue
6. 6:25Project months performance problem
7. 7:50Caching with Reselect and memo
8. 11:00Memoizing collapsed project months
9. 12:45Final performance results
10. 13:51Key takeaways
11. 14:32Profiler alternatives

" related talks

• 40mProfiling React rendering performanceSergey Ryzhov · React Alicante 2019
• 27mProfiling and Optimizing Performance of React ApplicationsSachin Chopra · ReactFoo Hyderabad 2018
• 28mDemystifying React PerformanceSteve Kinney · NationJS React 2018
• 38mLive Coding - Optimizing a React applicationJuho Vepsäläinen, Andrey Goncharov · React Finland 2020
• 20mPerformance Anxiety with React: Track and increase speed of your appsJessica Leach · React Day Berlin 2019
• 11mMaximizing React Perfomance with DevTools: Profiler and ComponentsJelena Maravic · React Alicante 2023
• 51mTips and tricks for optimizing your React applicationNik Graf · React Finland 2020
• 55mUnderstanding Performance of React ApplicationsVenkat Subramaniam · Great International Developer Summit 2023