Getting Started

Reinpl is a zero-config React performance monitoring SDK. Install it once and get instant visibility into your app's render performance.

Installation

npm install reinpl
# or
yarn add reinpl

Quick Start

Add these 3 lines to your app entry point. Reinpl will automatically track every component.

import { Reinpl } from "reinpl";

Reinpl.init({
  projectId: "your_project_id",
  apiKey: "your_api_key"
});
💡 Find your projectId and apiKey in the SDK Setup card on your dashboard.

Auto Instrumentation

By default, Reinpl hooks into React's internal DevTools API to automatically track every component - no manual wrapping needed.

// auto is true by default
Reinpl.init({
  projectId: "...",
  apiKey: "...",
  auto: true
});

// disable auto instrumentation
Reinpl.init({
  projectId: "...",
  apiKey: "...",
  auto: false  // use createProfiler manually
});

API Reference

Reinpl.init(config)

Initialize the SDK. Must be called once before any tracking begins.

ParamTypeDescription
projectIdstringYour project ID from the dashboard.
apiKeystringYour API key from the dashboard.
enabledboolean?Enable or disable tracking. Default: true.
autoboolean?Enable auto instrumentation. Default: true.
trackUseEffect(componentName)

Track useEffect hook usage in a component.

ParamTypeDescription
componentNamestringName of the component.
trackUseMemo(componentName)

Track useMemo hook usage in a component.

ParamTypeDescription
componentNamestringName of the component.
trackUseCallback(componentName)

Track useCallback hook usage in a component.

ParamTypeDescription
componentNamestringName of the component.

Configuration

interface ReinplConfig {
  projectId: string   // required
  apiKey: string      // required
  enabled?: boolean   // default: true
  auto?: boolean      // default: true
}

Next.js Setup

For Next.js App Router, initialize Reinpl inside a client component provider.

// components/ReinplProvider.tsx
"use client";

import { useEffect } from "react";
import { Reinpl } from "reinpl";

export default function ReinplProvider({ children }) {
  useEffect(() => {
    Reinpl.init({
      projectId: "your_project_id",
      apiKey: "your_api_key"
    });
  }, []);

  return <>{children}</>;
}

// app/layout.tsx
import ReinplProvider from "../components/ReinplProvider";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ReinplProvider>
          {children}
        </ReinplProvider>
      </body>
    </html>
  );
}

Dashboard Guide

WPI Score

The Weighted Performance Index scores your app from 0-100 across 4 factors: render duration (50%), re-render frequency (30%), blocking renders (10%), and trend (10%). Aim for 80+.

Component Heatmap

Shows all tracked components sorted by slowest average render time. Red = slow (>10ms), Yellow = moderate (3-10ms), Green = fast (<3ms). The 60fps threshold is 16ms.

Trend Graphs

Shows WPI score and render time over the last 7 days. Use this to spot performance regressions after deploys.

Notifications

Reinpl alerts you when your score drops more than 10 points, when components exceed 16ms, or when excessive re-renders are detected.