---
title: "Component Tracking"
description: "Learn how Sentry's React Native SDK allows you to monitor your application's component lifecycle using the useProfiler hook, withProfiler HOC, or Profiler component."
url: https://docs.sentry.io/platforms/react-native/integrations/component-tracking/
---

# Component Tracking | Sentry for React Native

Sentry's React Native SDK offers component tracking, a feature that lets you monitor the performance of your React components. The SDK provides multiple ways to attach React-related spans to the most current active span on the scope: the `withProfiler` higher-order component, the `useProfiler` hook, and the `Profiler` component. This allows you to get a drilled-down view into how your components are behaving so you can identify slow mounts or frequent updates, which might be having a negative impact on your app's performance.

## [Prerequisites](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#prerequisites)

* To set up component tracking, you need to configure tracing. For details on how to do this, check out our [Tracing documentation](https://docs.sentry.io/platforms/react-native/tracing.md).

## [`useProfiler` Hook](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#useprofiler-hook)

The `useProfiler` hook is a lightweight way to track a function component's lifecycle. Call it at the top of your component body with the component name as the first argument — no need to wrap your export.

```javascript
import * as Sentry from "@sentry/react-native";

function App() {
  Sentry.useProfiler("App");

  return (
    <FancyComponent>
      <NestedComponent someProp={2} />
      <AnotherComponent />
    </FancyComponent>
  );
}

export default App;
```

### [Hook Options](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#hook-options)

The `useProfiler` hook accepts an optional second argument with the following options:

```javascript
Sentry.useProfiler("App", { disabled: false, hasRenderSpan: true });
```

`disabled` (boolean)

If set to `true`, the profiler will not generate any spans. (Set as `false` by default.)

`hasRenderSpan` (boolean)

Option to have a `ui.react.render` span created by the Profiler. (Set as `true` by default.)

The `useProfiler` hook tracks `ui.react.mount` and `ui.react.render` spans. It does not track `ui.react.update` spans. If you need update tracking, use [`withProfiler`](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#withprofiler-higher-order-component) or the [`Profiler` component](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#profiler-component) instead.

## [`withProfiler` Higher-Order Component](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#withprofiler-higher-order-component)

The `withProfiler` HOC wraps a component to instrument it. It supports tracking mounts, renders, and updates.

```javascript
import * as Sentry from "@sentry/react-native";

function App() {
  return (
    <FancyComponent>
      <NestedComponent someProp={2} />
      <AnotherComponent />
    </FancyComponent>
  );
}

export default Sentry.withProfiler(App);
```

The React Profiler currently generates spans with three different kinds of op-codes: `ui.react.mount`, `ui.react.render`, and `ui.react.update`, as defined below:

`ui.react.mount`

The span that represents how long it took for the profiled component to mount.

`ui.react.render`

The span that represents the amount of time the profiled component stays on a page. This span is only generated if the profiled component mounts and unmounts while a transaction is occurring.

`ui.react.update`

The span that represents when the profiled component was updated. This span is only generated if the profiled component has mounted.

In [React Strict Mode](https://react.dev/reference/react/StrictMode), certain component methods will be [invoked twice](https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development). This may lead to duplicate `ui.react.mount` spans. React Strict Mode only runs in development mode, so this will have no impact on your production traces.

### [Profiler Options](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#profiler-options)

The `withProfiler` higher-order component has a variety of options for further customization. They can be passed in as the second argument to the `withProfiler` function.

```javascript
export default Sentry.withProfiler(App, { name: "CustomAppName" });
```

`name` (string)

The name of the component being profiled. By default, the name is taken from the component `displayName` property or the component `name` property.

`disabled` (boolean)

If set to `true`, the profiler will not generate any spans. (Set as `false` by default.)

`includeRender` (boolean)

Option to have a `ui.react.render` span created by the Profiler. (Set as `true` by default.)

`includeUpdates` (boolean)

Option to have `ui.react.update` spans created by the Profiler. (Set as `true` by default.) We recommend setting this prop as `false` for components that will be rerendered often, such as text input components. The resulting spans can be very noisy.

## [`Profiler` Component](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#profiler-component)

The `Profiler` component can be used as a parent wrapper to profile a child component. This is useful when you want to profile a component without modifying its export.

```javascript
import * as Sentry from "@sentry/react-native";

function ParentComponent({ data }) {
  return (
    <Sentry.Profiler name="SomeChild" updateProps={{ data }}>
      <SomeChild data={data} />
    </Sentry.Profiler>
  );
}
```

The `Profiler` component accepts the following props: `name`, `disabled`, `includeRender`, `includeUpdates`, and `updateProps`. Pass `updateProps` to enable `ui.react.update` span tracking — when the values in `updateProps` change between renders, the Profiler will generate update spans. This is the main advantage of using `Profiler` over `useProfiler`, which does not track updates.

`withProfiler` handles `updateProps` automatically by forwarding the wrapped component's props. When using the `Profiler` component directly, you need to pass `updateProps` yourself.

## [Next Steps:](https://docs.sentry.io/platforms/react-native/integrations/component-tracking.md#next-steps)

* To track your React Native application's time to initial display and time to full display, check out our [Time to Display guide](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md).