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

Async storage

Async storage alternative

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