https://react-scan.com/

Introduction

Developer tool that automatically detecting slow or unnecessary component renders.

• Scans running React app (locally or on a deployed URL) and finds components that are rendering often or slowly.
• Highlights UI that needs optimization.

Install React Scan

npm install react-scan

Wrap Your App

1. ScanProvider

• <ScanProvider> wraps your entire app.
• It monitors all component renders inside your app automatically.
• It also provides dev tools UI overlay when running in development.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ScanProvider } from "react-scan";  // import wrapper

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <ScanProvider>
    <App />
  </ScanProvider>
);

1. scan() in App.tsx (recommended)

import { scan } from 'react-scan';

// Run this effectively "outside" of React to monitor everything
scan({
  enabled: true,
});