Help! My React app is slowwwww!
summary
Checklist of concrete fixes and tools: avoid touching the DOM by using use unique IDs as keys instead of indices; stop recreating components by move HOCs out of render; prevent pointless reconciliation with PureComponent and stable props (consts, bind once or class‑field arrow methods); combine multiple Redux dispatches into one; for large immutable data use Immutable.js or seamless‑immutable; memoize expensive selectors with createSelector from reselect; use React Profiler (16.5) and React Virtualized and throttle Chrome to reproduce slow devices.
AI-written summary · about
chapters (17)
- 0:00Intro
- 1:11Sponsors
- 1:47Context
- 3:38Reconciliation
- 5:01Exercise
- 8:50React Performance
- 9:18Avoid unnecessary DOM updates
- 16:17Avoid unnecessary reconciliation
- 17:20Should component update
- 20:19Shallow comparison
- 26:31Component boundaries
- 28:53Redux performance
- 33:12Avoiding calculations
- 38:17Redux derived state
- 41:57Recap
- 43:44Debugging
- 45:23Conclusion
related talks
27mProfiling and Optimizing Performance of React Applications
26mLightning Fast React Apps
51mReact & Redux: Optimizing performance
29mQuick Wins to Improve Your App’s Performance
28mDemystifying React Performance
20mPerformance Anxiety with React: Track and increase speed of your apps
21mMaking Your React Apps Perform At Scale
51mTips and tricks for optimizing your React application