Measuring and Improving React Native Performance

on YouTube ↗26m

" summary

A Flipper plugin records JS and UI FPS over time and automates runs with ADB shell input swipe on a Samsung J3 2017 to reproduce low-end behavior; React DevTools flame charts and Hermes/IDE profilers pinpoint expensive renders. Fixes include memoize renderItem to stop unnecessary rerenders, disabling react-native-snap-carousel loop that inflated slides, and replacing nested FlatList carousels with a ScrollView paging strategy. Measured score rises roughly 40→90, JS “dead” time drops from ~4s to ~0s.

AI-written summary · about

" chapters (10)

1. 0:00Introduction and setup
2. 1:48What makes an app performant
3. 3:58React Native performance basics
4. 5:24Measuring performance tips
5. 7:15Real-world case study
6. 9:03Analyzing with React DevTools
7. 13:18Fixing performance issues
8. 18:40Iteration three and deeper fixes
9. 20:24Final optimizations
10. 23:31Summary and next steps

" related talks

• 39mPerformance issues: the usual suspectsA. Moureaux · React Native EU 2022
• 24mThe Performance Myths of React Native appsAnkita Kulkarni · App.js Conf 2023
• 31mThe performance myths of React NativeAnkita Kulkarni · Chain React 2023
• 23mPractical Performance for React NativeAnna Doubkova · React Finland 2019
• 24mOptimising React Native "Tools and Tips"Tadeu Zagallo · React.js Conf 2016
• 25mReact Native Performance - Take 2Parashuram N · React Native EU 2020
• 39mPerformance Does Matter - Making Your React-Native App FastOmri Bruchim · React Native EU 2020
• 22mYou can go EVERYWHERE but I can go FAST - performance case studyJ. Binda · React Native EU 2022