Lessons learned from a React performance nightmare
summary
A back-office React app with Redux holds up to 26 weeks of data, 50 cards per week, and spikes to 1,300 campaigns in memory (infinite scroll can push it toward 10,000). Performance collapses from shallow prop comparisons caused by transforming serialized calendar-week strings into objects in selectors, and from an external activeCampaignId forcing all cards to re-render. Fixes: move transforms into components or use reselect to memoize, store active flags inside each campaign, pass IDs instead of full objects, and connect components locally rather than lifting props.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:15What happened
- 2:10Campaigns
- 3:16Requirements
- 4:54Sample code
- 5:20Wasted renders
- 6:30Data transforms
- 7:20Demo
- 14:47The Obvious Choice
- 15:35Why was it bad
- 16:48How we solved it
- 19:25Prop Lifting
- 20:07Endpoints
- 20:37Examples
- 22:35Why you only pass in the user ID
- 22:52Why you only pass in the campaign list
- 25:41Dont lift props
related talks
36mReact + Redux: Performance & Scalability
51mReact & Redux: Optimizing performance
16mReact Component Profiling
53mHelp! My React app is slowwwww!
38mLive Coding - Optimizing a React application
21mMaking Your React Apps Perform At Scale
02h 50mReact: Internals and Advanced Performance Patterns
51mOptimizing your React Application