react-profiler-overlay

A lightweight render profiler overlay for React Native and React Native Web apps.

Requirements

• react >= 18
• react-native (optional — required for native usage)

Installation

For now

git clone https://github.com/jmusial/react-profiler-overlay.git
cd react-profiler-overlay
npm install
npm run pack:local

Then install the generated .tgz into your project:

npm install /path/to/react-profiler-overlay/*.tgz

Exports

Export	Description
Profiler	Wrapper around React's Profiler that records render timing into the store
withProfilerOverlay	HOC to profile any component
default (ProfilerOverlay)	The overlay UI — fixed panel on web, dev-menu bottom sheet on native

---

Web (React Native Web)

Place <ProfilerOverlay /> once at the root of your app. It renders a fixed overlay panel in the top-right corner. Wrap any component tree you want to profile with <Profiler>.

import ProfilerOverlay, { Profiler } from "react-profiler-overlay";

function App() {
  return (
    <>
      <Profiler id="Feed">
        <Feed />
      </Profiler>
      <Profiler id="Sidebar">
        <Sidebar />
      </Profiler>

      <ProfilerOverlay />
    </>
  );
}

Controls:

• Start / Stop — begin and end a measurement session
• Reset — clear all recorded data
• Copy JSON — copy raw session data to clipboard
• Ctrl+Shift+M — keyboard shortcut to toggle recording
• ◇ / ◆ — mark a measurement as baseline for delta comparison

---

Native (React Native)

Place <ProfilerOverlay /> at the root the same way. On native it renders nothing visible until triggered — it registers a "Toggle Profiler Overlay" item in the React Native dev menu.

import ProfilerOverlay, { Profiler } from "react-profiler-overlay";

function App() {
  return (
    <>
      <Profiler id="Feed">
        <Feed />
      </Profiler>

      <ProfilerOverlay />
    </>
  );
}

To open the overlay:

1. Shake the device, or press Cmd+D (iOS simulator) / Cmd+M (Android emulator)
2. Tap "Toggle Profiler Overlay" in the dev menu
3. The profiler slides up as a bottom sheet

The overlay is dev-only — ProfilerOverlay renders null in production builds.

---

withProfilerOverlay HOC

Wraps a component with a Profiler without modifying its JSX:

import { withProfilerOverlay } from "react-profiler-overlay";

function Header({ title }: { title: string }) {
  return <Text>{title}</Text>;
}

const ProfiledHeader = withProfilerOverlay(Header, "Header");

An optional second argument sets the profiler ID; it defaults to the component's displayName or name.

Coming soon

• examples
• npm release

License

MIT

Acknowledgements

Implemented as a RnD project in SWM.