Performance issues: the usual suspects

on YouTube ↗39m

" summary

A dummy app with common React Native slowdowns is built and fixed live using React DevTools, Hermes profiler and Android Studio traces plus a Flipper CLI that runs automated 10-iteration measurements. Changes cut JS thread blocked time from ~9s to <4s then to ~1.4s, dropped a 400ms tweets render to ~0.4ms by extracting countdown and switching to Jotai atoms, removed a costly date parse in filterTweets, enabled lazy tabs, stopped a background skeleton animation and replaced a WebView GIF, raising the score to 96/100.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to performance issues
2. 2:27Measuring performance with CLI tool
3. 9:12Optimizing component re-renders
4. 13:32Comparing performance metrics
5. 15:45Investigating app startup
6. 20:44Single responsibility principle
7. 23:13Lazy rendering of tabs
8. 25:21High algorithmic complexity
9. 31:54UI thread performance issues
10. 35:04Heavyweight views impact
11. 38:20Summary of fixes

" related talks

• 26mMeasuring and Improving React Native PerformanceAlexandre Moureaux · App.js Conf 2022
• 24mOptimising React Native "Tools and Tips"Tadeu Zagallo · React.js Conf 2016
• 23mPractical Performance for React NativeAnna Doubkova · React Finland 2019
• 24mThe Performance Myths of React Native appsAnkita Kulkarni · App.js Conf 2023
• 31mThe performance myths of React NativeAnkita Kulkarni · Chain React 2023
• 30mMaking React Native Fast & LeanDan Caspi · You Gotta Love Frontend 2016
• 39mPerformance Does Matter - Making Your React-Native App FastOmri Bruchim · React Native EU 2020
• 25mReact Native Performance - Take 2Parashuram N · React Native EU 2020