React Responsively, Render Responsibly

on YouTube ↗17m

" summary

Starts with a sluggish photo grid taking about 600ms to 10ms after fixes and shows exact steps: use Chrome DevTools and React Profiler to spot full-grid re-renders, separate selection state from the photos array to avoid cloning large immutable objects, avoid creating new prop objects by spreading primitives so shallow compares succeed, create per-instance memoized selectors with reselect and react-window and apply windowing to cut DOM work and CPU time.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 5:15State
3. 6:32Selector
4. 8:10Shallow Compare
5. 10:00Memoization
6. 15:28Result

" related talks

• 38mLive Coding - Optimizing a React applicationJuho Vepsäläinen, Andrey Goncharov · React Finland 2020
• 55mUnderstanding Performance of React ApplicationsVenkat Subramaniam · Great International Developer Summit 2023
• 53mHelp! My React app is slowwwww!Ben Ilegbodu · React Alicante 2018
• 27mProfiling and Optimizing Performance of React ApplicationsSachin Chopra · ReactFoo Hyderabad 2018
• 40mProfiling React rendering performanceSergey Ryzhov · React Alicante 2019
• 16mReact Component ProfilingWouter Van Schandevijl · React Brussels 2023
• 19mThe Mystery of React RendersAashima Ahuja · React Brussels 2023
• 27mOptimizing the Critical Rendering Path in ReactAlex Moldovan · React Day Berlin 2018