Profiling

Important: The Vega SDK supports many of the React Native version 0.83 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native V0.83 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native V0.83, see the React Native documentation, version 0.83. For the most current feature information, see the Release Notes.

Vega provides two ways to profile your apps: the built-in profiler and React Native DevTools.

The Vega Visual Extension provides access to the Vega built-in profiler. Use the built-in profiler to get a side-by-side view of work done in the JavaScript thread and main thread. To use the profiler, open the Debug menu and select Show Perf Monitor.

React Native DevTools provides component profiling and performance insights for React Native 0.83 apps. For details, see Use React DevTools to Inspect Component Rendering.

Profiling Vega app performance

The Vega SDK provides dedicated profiling and performance tools through Vega Studio. Unlike Android's systrace, Vega uses its own tooling to collect and analyze traces for your app.

The following sections describe the profiling tools available for Vega apps.

CPU and activity monitoring

The following topics provide information about how to use the Activity Monitor in Vega Studio to track real-time CPU usage, record profiling sessions, and identify hot functions with flamegraphs:

Monitor CPU Usage — Real-time CPU metrics, recording, hot functions, flamegraphs, and call trees.
Use Flashlight to Monitor Activity — Lightweight activity monitoring.
Investigate JavaScript Thread Performance — Analyze JS thread states and identify bottlenecks.
Inspect Traces in Vega Apps — Add custom trace points with Systrace and analyze them in Perfetto.

Memory profiling

The following topics provide information about how to monitor your app's memory consumption and investigate JavaScript heap issues:

Monitor and Record Memory — Track PSS, USS, and JS Heap usage over time.
Investigate JavaScript Memory — Diagnose JS heap overflows and analyze heap snapshots with Memlab or Chrome DevTools.
Detect Memory Leaks — Identify and resolve memory leaks.

UI and video fluidity

The following topics help you measure and optimize UI fluidity for smooth scrolling and animations:

Measure Fluidity and Foreground Memory — Establish baseline fluidity KPI measurements.
Investigate UI Fluidity Issues — Step-by-step process to identify and resolve fluidity issues.
Identify UI Rendering Issues — Analyze fluidity graphs, CPU profiles, and Perfetto traces to find rendering bottlenecks.
Investigate Component Re-rendering Issues — Use why-did-you-render to detect unnecessary React re-renders.
Detect Overdraw — Find and eliminate unnecessary pixel redraws.
Use React DevTools to Inspect Component Rendering — Profile component rendering with React DevTools.

General performance guidance

The following topics cover optimization strategies, common questions, and key metrics for Vega apps:

App Performance Best Practices — Optimization guidelines for Vega apps.
App Performance FAQ — Common performance questions and answers.
Measure App KPIs — Measure key performance indicators including launch time, fluidity, and memory.
Avoid Overdraw in Your App — Techniques to reduce overdraw.
Improve App Performance with Concurrent Rendering — Leverage React concurrent features for better performance.

Last updated: Jun 26, 2026