Profiling React Native on Android with System Tracing
System Tracing helps you find UI jank on Android by showing where time is spent in each 16ms frame. Use it in Android Studio to diagnose stuttering animations by inspecting the UI, JS, and Native Module threads.
Why it exists
Android runs on thousands of different devices, so UI performance isn't always guaranteed. When animations stutter or interactions feel slow (known as "jank"), it's because a frame took longer than the 16ms budget to render. System Tracing was created to answer the fundamental question: where is that time being spent?
The mental model
Think of System Tracing like a musical score for your app's performance. Each thread is an instrument, and the trace shows what each one is "playing" over time. You're looking for the instrument that's out of sync and causing the whole orchestra to lag, pushing a frame past its 16ms deadline.
How it works
First, ensure Development Mode is off. Then, you connect your device and run your app as "profileable" from Android Studio. In the profiler, you start a "Capture System Activities" task, perform the laggy interaction in your app, and then stop the recording. This generates a detailed trace file you can inspect in Android Studio or a tool like Perfetto.
When to use it
Use System Tracing whenever you observe stuttering, dropped frames, or slow animations in your React Native Android app. It's the primary tool for diagnosing UI performance bottlenecks that might originate from the JavaScript thread, the native UI thread, or native modules.
When not to use it
Do not use this tool with Development Mode enabled; the extra overhead will pollute your results and lead to incorrect conclusions. It is also not the right tool for debugging pure JavaScript logic errors that don't impact the UI thread. For those, a standard JS debugger is more appropriate.
One canonical example
To find a culprit for jank, you open a trace and enable VSync highlighting to see the 16ms frame boundaries. You then find your app's process and focus on three key threads. First, the UI Thread, where Android's standard measure and layout work happens. Second, the JS Thread (often named mqt_js), where your React code executes. Third, the Native Modules Thread (mqt_native_modules), where native code is run. If you see a long-running task on any of these threads that crosses a 16ms boundary, you have found a likely source of your performance issue.
Interview question
For which scenario is System Tracing the most effective diagnostic tool in a React Native Android app?
- a.Identifying why a specific JavaScript function returns an incorrect value.
- b.Analyzing network request timings and API response delays in a debug build.
- c.Optimizing the bundle size and startup time of the application.
- d.Pinpointing the exact thread causing UI animations to stutter and drop frames.Correct
Why? this is the answer
System Tracing is specifically designed to diagnose UI performance bottlenecks like stuttering animations and dropped frames by showing where time is spent across key threads within the 16ms frame budget. It is explicitly stated not to be used in Development Mode (implied by 'debug build') and is not for general JavaScript logic errors or network performance.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles