Practical Performance for React Native
summary
Measurements show the slowdown lives on the JavaScript thread (target 60fps, observed 30 and even 15 or negative), diagnosed with React Native Debugger / Chrome performance flame charts and Android systrace. Remedies that actually move the needle: removed shouldComponentUpdate, replace 16–20 dispatched actions with single dispatched action (empty action once costs ~3s on a huge store), memoize with reselect selectors, avoid anonymous inline functions, use inline requires and switch navigation away from state-driven remounting.
AI-written summary · about
chapters (17)
- 0:00Start
- 2:29The weak link?
- 3:24Looking for the culprit
- 5:31Measuring JS performance
- 9:06Reconciler
- 10:35Node type change
- 10:59Prop change
- 11:09Recursive updates
- 11:32Examples - anonymous functions
- 12:18Examples - react-redux
- 13:27Examples - selectors
- 14:22Local state - setting state based on props
- 15:20Local state - necessary?
- 17:34Connecting state
- 19:30Native only - animations
- 19:49Native only - inline requires
- 20:58Native only - low-level measuring
related talks
26mMeasuring and Improving React Native Performance
39mPerformance issues: the usual suspects
24mOptimising React Native "Tools and Tips"
24mThe Performance Myths of React Native apps
30mMaking React Native Fast & Lean
25mReact Native Performance - Take 2
26mOptimizing React Native Performance
31mThe performance myths of React Native