React & Redux: Optimizing performance
summary
Covers concrete causes of wasted renders and fixes: using unstable keys or creating new array/object/function references inside render forces React Redux’s mapStateToProps to produce new props every store update; reducers that copy whole arrays instead of updating one item blow up references; inline callbacks cause needless re-renders; solution set includes memoized selectors, using PureComponent or explicit prop destructuring, batching related actions, and escaping React for high-frequency DOM moves (drag) while measuring with React DevTools and Chrome timings.
AI-written summary · about
chapters (9)
- 0:00Introduction and background
- 12:15React rendering fundamentals
- 21:08Redux overview and optimizations
- 25:51Performance pitfalls in React
- 32:37Reducers and state updates
- 36:14Thunks and batching actions
- 38:23Architectural optimizations
- 41:33Measuring and trade-offs
- 43:17Q&A session
related talks
36mReact + Redux: Performance & Scalability
27mProfiling and Optimizing Performance of React Applications
53mHelp! My React app is slowwwww!
19mThe Mystery of React Renders
28mDemystifying React Performance
13mEnhancing React Performance: Mastering Re-render Optimization
20mPerformance Anxiety with React: Track and increase speed of your apps
18mDestructuring state management (in React)