Profiling with Flipper in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable Flipper in a React Native app.

React Native

if (__DEV__) {
  require('react-native-flipper').[1]();
}

Drag options to blanks, or click blank then click option'

Aenable

Bstart

Cinitialize

Dconnect

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method that does not exist like start or enable.

The connect() function from react-native-flipper starts the connection to Flipper in development mode.

2fill in blank

medium

Complete the code to add Flipper plugin for React DevTools.

React Native

import ReactDevTools from 'react-devtools-core';

Flipper.addPlugin(new ReactDevTools.[1]());

Drag options to blanks, or click blank then click option'

AClient

BAgent

CPlugin

DConnector

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Plugin or Agent as the class name.

The Client class from react-devtools-core is used to create a new React DevTools plugin instance for Flipper.

3fill in blank

hard

Fix the error in the Flipper setup to correctly enable network plugin.

React Native

import { NetworkPlugin } from 'react-native-flipper';

const network = new NetworkPlugin();

Flipper.[1](network);

Drag options to blanks, or click blank then click option'

AusePlugin

BaddPlugin

CregisterPlugin

DenablePlugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using registerPlugin which is not a method on Flipper object.

The correct method to add a plugin instance to Flipper is addPlugin().

4fill in blank

hard

Fill both blanks to create a Flipper plugin that logs messages.

React Native

class LoggerPlugin extends Flipper.[1] {
  constructor() {
    super('[2]');
  }
}

Drag options to blanks, or click blank then click option'

APlugin

BClient

CLogger

DDebugger

Attempts:

3 left

💡 Hint

Common Mistakes

Using Client as base class or a wrong plugin name.

Flipper plugins extend the Plugin class. The plugin name can be any string, here 'Logger'.

5fill in blank

hard

Fill all three blanks to create a Flipper React Native plugin with lifecycle methods.

React Native

class MyPlugin extends Flipper.[1] {
  onConnect() {
    console.log('[2] connected');
  }
  onDisconnect() {
    console.log('[3] disconnected');
  }
}

Drag options to blanks, or click blank then click option'

APlugin

BLogger

CMyPlugin

DClient

Attempts:

3 left

💡 Hint

Common Mistakes

Using Logger or Client as base class or plugin name.

The plugin class extends Plugin. The plugin name used in logs is 'MyPlugin'.

Practice

1. What is the main purpose of using Flipper with a React Native app?

easy

A. To write new React Native components

B. To deploy the app to app stores

C. To profile and debug app performance issues

D. To create app UI layouts visually

Solution

1. Step 1: Understand Flipper's role

   Flipper is a tool designed to connect with React Native apps to help developers see performance data and debug issues.

2. Step 2: Identify the main use case

   It is not used for writing code, deploying apps, or designing UI, but for profiling and debugging.

3. Final Answer:

   To profile and debug app performance issues -> Option C

4. Quick Check:

   Profiling with Flipper = Debugging performance [OK]

Hint: Flipper is for debugging and profiling, not coding or deploying [OK]

Common Mistakes:

• Thinking Flipper is a code editor
• Confusing Flipper with deployment tools
• Assuming Flipper designs UI

2. Which of the following is the correct way to start Flipper for profiling a React Native app?

easy

A. Run the command flipper start in the terminal

B. Open the Flipper desktop app and connect your device

C. Add import Flipper from 'flipper' in your app code

D. Use npm install flipper to install Flipper in the app

Solution

1. Step 1: Know how Flipper runs

   Flipper is a desktop app you open to connect to your running React Native app for profiling.

2. Step 2: Identify the correct start method

   You do not start Flipper via terminal commands or import it in app code; you open the desktop app and connect your device.

3. Final Answer:

   Open the Flipper desktop app and connect your device -> Option B

4. Quick Check:

   Flipper runs as desktop app = Open the Flipper desktop app and connect your device [OK]

Hint: Flipper is a desktop app you open, not a command or package [OK]

Common Mistakes:

• Trying to start Flipper via terminal command
• Importing Flipper in app code incorrectly
• Installing Flipper as an npm package

3. Given you have connected Flipper to your React Native app, which plugin would you use to check memory usage over time?

medium

A. Memory plugin

B. Network plugin

C. React DevTools plugin

D. Layout plugin

Solution

1. Step 1: Understand Flipper plugins

   Flipper has plugins for different profiling tasks: React DevTools for component tree, Network for requests, Memory for memory usage, Layout for UI layout.

2. Step 2: Match plugin to task

   To check memory usage over time, the Memory plugin is the correct choice.

3. Final Answer:

   Memory plugin -> Option A

4. Quick Check:

   Memory usage = Memory plugin [OK]

Hint: Memory plugin shows memory data, not Network or Layout [OK]

Common Mistakes:

• Choosing Network plugin for memory data
• Using React DevTools for memory profiling
• Confusing Layout plugin with memory

4. You notice Flipper is not showing network requests from your React Native app. What is a common cause and fix?

medium

A. You forgot to enable the Flipper Network plugin in the app

B. You need to reinstall Flipper desktop app

C. Flipper only works on iOS, switch to iOS device

D. The app is not running; start the app first

Solution

1. Step 1: Identify common causes for missing network data

   Flipper requires the Network plugin enabled in the app to capture requests.

2. Step 2: Choose the fix

   If network requests don't show, enabling the Network plugin in the app code or config usually fixes it.

3. Final Answer:

   You forgot to enable the Flipper Network plugin in the app -> Option A

4. Quick Check:

   Enable Network plugin = show requests [OK]

Hint: Enable Network plugin in app to see requests in Flipper [OK]

Common Mistakes:

• Assuming Flipper only works on iOS
• Restarting Flipper without checking plugin settings
• Not running the app at all

5. You want to profile CPU usage spikes in your React Native app using Flipper. Which steps should you follow to capture and analyze this data effectively?

hard

A. Use Flipper's Layout plugin to check CPU usage visually

B. Install a CPU monitoring npm package and ignore Flipper

C. Restart the app multiple times without Flipper to clear CPU spikes

D. Open Flipper, enable the CPU Profiler plugin, run the app workload, then review the CPU timeline

Solution

1. Step 1: Use Flipper's CPU Profiler plugin

   Flipper provides a CPU Profiler plugin to record CPU usage over time during app execution.

2. Step 2: Run app workload and analyze timeline

   Enable the plugin, run the app workload causing spikes, then review the CPU timeline in Flipper to find issues.

3. Final Answer:

   Open Flipper, enable the CPU Profiler plugin, run the app workload, then review the CPU timeline -> Option D

4. Quick Check:

   CPU profiling = CPU Profiler plugin + workload + timeline [OK]

Hint: Use CPU Profiler plugin and run workload to see spikes [OK]

Common Mistakes:

• Ignoring Flipper and using unrelated npm packages
• Using Layout plugin for CPU profiling
• Restarting app without profiling