Profiling with Flipper in React Native

Introduction

Profiling helps you see how your app uses resources like memory and CPU. Flipper is a tool that shows this information in a simple way.

You want to find why your app feels slow.

You need to check if your app uses too much memory.

You want to see how long certain actions take in your app.

You want to improve app performance before releasing it.

Syntax

React Native

1. Install Flipper on your computer.
2. Add Flipper dependencies to your React Native app.
3. Run your app in debug mode.
4. Open Flipper and connect to your app.
5. Use the Profiling plugin to see performance data.

Flipper works best with React Native apps in debug mode.

You can add plugins to Flipper for more detailed profiling.

Examples

This adds Flipper libraries to your Android app for debugging.

React Native

// Example: Add Flipper dependencies in android/app/build.gradle

debugImplementation 'com.facebook.flipper:flipper:0.125.0'
debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.125.0'
debugImplementation 'com.facebook.flipper:flipper-fresco-plugin:0.125.0'

This code runs Flipper only in development mode.

React Native

// Example: Enable Flipper in React Native app

if (__DEV__) {
  const Flipper = require('react-native-flipper');
  Flipper.addPlugin(...);
}

Sample App

This simple app lets you press a button to increase a number. Using Flipper, you can watch how fast the app updates and check memory use.

React Native

import React from 'react';
import {View, Text, Button} from 'react-native';

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

// Run this app in debug mode and open Flipper to see the performance of button presses.

Important Notes

Always run your app in debug mode to connect with Flipper.

Flipper shows live data, so keep your app open while profiling.

You can profile network requests, layout, and more with Flipper plugins.

Summary

Profiling helps find performance issues in your app.

Flipper is a free tool that connects to React Native apps for profiling.

Use Flipper plugins to see memory, CPU, and network data easily.