React Native Performance debugging workshop
Software Architect, Consultant & Founder
Web / Mobile / VR / AR / IoT / Blockchain
Novick Labs
Agenda
- React Native internals recap
- Understanding & Identifying Performance Issues
- Improving re-renders and memoization
- Animations with 60fps
- Measuring and finding memory leaks
- API calls efficiency
- TTI & bundle size analysis
- Review, QA & Closing
Schedule
- React Native performance intro
- Understanding & Identifying Common Performance Issues
- Exercises 1 & 2
- Animations , Memory management & Network
- Exercise 3
- Review, QA & Closing
React Native internals recap
React Native internals recap
React Native internals recap
Start
Main Thread
load .js bundles and send to JS thread
React
Reconciler generates new VDOM layout
JS Thread
layout calculations
using Yoga
UI
updates
Shadow thread
Native modules
Understanding & Identifying Performance Issues
- ui re-renders/jitters
- unnecessary rendering
- lack of memoization
- animations dropping frames
- memory leaks
- unnecessary network requests
- app crashes
Symptops
Coding time!
10 minutes break
npx react-native-bundle-visualizer@3.1.0