Debugging and Performance Profiling

Debugging fundamentals

Tools

• React Native build in tools
• Flipper & it's plugins
• React Devtools
• Native iOS tools
• Native Android tools

Dev menu

Flipper

React DevTools

• Component tab
• Profiler

Network plugin

Layout plugin

react-navigation plugin

https://github.com/Fausto95/rn-async-storage-flipper

https://github.com/react-native-async-storage/async-storage

Async storage

Async storage alternative

https://github.com/mrousavy/react-native-mmkv

https://github.com/Fausto95/rn-async-storage-flipper

https://github.com/bamlab/react-native-flipper-performance-monitor

Native modules bridging

Memory and heap snapshots

Memory leaks - common causes

1. Event Listeners: Not properly cleaning up event listeners when a component is unmounted can lead to memory leaks.
2. Timers: Timers like setInterval and setTimeout that are not cleared can cause memory leaks.
3. Global Variables: Sometimes, global variables can hold onto memory that should be freed.
4. Closures: Closures can sometimes capture and hold references to objects.
5. Immutable Data Structures: If not handled properly, they can lead to memory leaks.
6. Third-party Libraries: Some libraries might have memory leaks issues.

Native debugging tools - iOS

XCode instruments

Native debugging tools - Android

Android Studio

Bundle analysis 

npx react-native-bundle-visualizer@3.1.0

Let's analyze and improve performance of the app

https://github.com/vnovick/rn-perf-workshop-app