@kipkap/debug-bar-plugin-react-renders

Debug-bar plugin that counts React re-renders per component and highlights them on the page (react-scan style), built on bippy.

npm i @kipkap/debug-bar-plugin-react-renders

Install the hook first — this is the #1 gotcha

React only reports renders if a DevTools hook exists before react-dom loads. Because import statements are hoisted, calling installReactRenderHook() in the same file as your app runs after react-dom is already imported — too late.

So make it the very first import of your entry, via the side-effect subpath:

// main.tsx / app.jsx — the FIRST line, before any React import
import '@kipkap/debug-bar-plugin-react-renders/install';

import { createRoot } from 'react-dom/client';
// ... the rest of your app

Inertia (Laravel): in resources/js/app.jsx, put it above @inertiajs/react:

import '@kipkap/debug-bar-plugin-react-renders/install'; // must be first
import { createInertiaApp } from '@inertiajs/react';
import { createRoot } from 'react-dom/client';

Verify: in the browser console, window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size should be ≥ 1. If it's 0, the hook is still loading too late.

Add the plugin to the bar

import { DebugBar } from '@kipkap/debug-bar-react';
import { reactRendersPlugin } from '@kipkap/debug-bar-plugin-react-renders';

<DebugBar theme="dark" plugins={[reactRendersPlugin()]} />;

Full docs in the repo.

MIT © Dries Heyninck