react-render-profiler 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bogdan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# React Render Profiler
+
+A tiny profiler helper to measure initial render + rerender timings for React components.
+
+## Install
+
+```bash
+npm i react-render-profiler
+```
+
+## Why
+
+Use it when you want:
+
+- render count and rerender count per component instance
+- approximate commit timing (`render start` -> `useEffect`)
+- delayed aggregated reporting to keep console noise low
+
+## Usage (HOC)
+
+```tsx
+import { withRenderProfiler } from 'react-render-profiler';
+import { ProductCard } from './ProductCard';
+
+export default withRenderProfiler(ProductCard, {
+  reportAfterMs: 5000,
+  logEachRender: false
+});
+```
+
+## Actual usage patterns
+
+### 1) Wrap component on export (global for all usages)
+
+```tsx
+function MenuItem(props) {
+  ...
+}
+
+export default withRenderProfiler(MenuItem, {
+  componentName: 'MenuItem',
+  groupByComponent: true,
+  enabled: process.env.NODE_ENV !== 'production',
+  reportAfterMs: 5000,
+});
+```
+
+### 2) Wrap only in one place (recommended for focused profiling)
+
+```tsx
+const FooterProfiled = withRenderProfiler(FooterWidget, {
+  componentName: 'HomePage:FooterWidget',
+  groupByComponent: true,
+  enabled: process.env.NODE_ENV !== 'production',
+  reportAfterMs: 5000,
+});
+
+// Inside ProductPage:
+<RecommendationsWidgetProfiled productAlias={product.alias} />
+```
+
+## Measure only specific usage
+
+For HOC usage, `enabled` can be a function of component props.  
+This lets you measure only specific places/instances and keep others unprofiled.
+
+```tsx
+type CardProps = { alias: string; profileRender?: boolean };
+
+const ProductCardProfiled = withRenderProfiler<CardProps>(ProductCard, {
+  componentName: 'ProductCard',
+  groupByComponent: true,
+  enabled: (props) => props.profileRender === true,
+});
+
+// Only this usage is measured:
+<ProductCardProfiled alias="a" profileRender />
+
+// This usage is ignored by profiler:
+<ProductCardProfiled alias="b" />
+```
+
+## Usage (Hook)
+
+```tsx
+import { useRenderProfiler } from 'react-render-profiler';
+
+export function CheckoutSidebar() {
+  useRenderProfiler('CheckoutSidebar', { reportAfterMs: 3000 });
+  return <aside>...</aside>;
+}
+```
+
+## API
+
+### `withRenderProfiler(Component, options?)`
+
+Wraps a component and reports stats to console after inactivity timeout.
+
+### `useRenderProfiler(componentName, options?)`
+
+Hook variant when you do not want to wrap export.
+
+### `options`
+
+- `reportAfterMs` (default `3000`) - report debounce timeout
+- `groupByComponent` (default `false`) - aggregate all instances under one component report
+- `logEachRender` (default `false`) - emit log on every commit
+- `enabled` (default `true`) - disable profiler globally (`boolean`) or for HOC by props (`(props) => boolean`)
+- `logger` - custom logger function for integrating with your telemetry
+
+### Typical presets
+
+- **Page/widget profiling**: `{ componentName, groupByComponent: true, enabled: dev, reportAfterMs: 5000 }`
+- **Instance-level profiling**: `{ componentName, enabled: (props) => ..., reportAfterMs: 2000-5000 }`
+
+## Notes
+
+- In React StrictMode (development), render/effect invocations can be doubled.
+- This helper measures render-to-effect timing, not full browser paint time.
+
+## Report Fields
+
+Each console row includes these fields:
+
+- `label` - logger label, usually `[RenderProfiler] <ComponentName>`
+- `component` - component name used for profiling/grouping
+- `renders` - total committed renders counted in this profile bucket
+- `initialRenders` - number of first renders for mounted instances in this bucket
+- `rerenders` - number of subsequent renders (`renders - initialRenders`)
+- `totalMs` - sum of measured render durations in milliseconds
+- `avgMs` - average render duration (`totalMs / renders`)
+- `minMs` - fastest measured render duration in milliseconds
+- `maxMs` - slowest measured render duration in milliseconds

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type LogPayload = {
+    component: string;
+    renders: number;
+    initialRenders: number;
+    rerenders: number;
+    totalMs: number;
+    avgMs: number;
+    minMs: number;
+    maxMs: number;
+};
+export type RenderProfilerOptions = {
+    componentName?: string;
+    groupByComponent?: boolean;
+    reportAfterMs?: number;
+    logEachRender?: boolean;
+    enabled?: boolean;
+    logger?: (label: string, payload: LogPayload) => void;
+};
+export type RenderProfilerHOCOptions<P> = Omit<RenderProfilerOptions, 'enabled'> & {
+    enabled?: boolean | ((props: P) => boolean);
+};
+export declare const useRenderProfiler: (componentName: string, options?: RenderProfilerOptions) => void;
+export declare const withRenderProfiler: <P extends object>(WrappedComponent: React.ComponentType<P>, options?: RenderProfilerHOCOptions<P>) => React.FC<P>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,KAAK,UAAU,GAAG;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,GAAG;IACjF,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7C,CAAC;AAyDF,eAAO,MAAM,iBAAiB,kBACb,MAAM,YACZ,qBAAqB,KAC7B,IAgEF,CAAC;AAEF,eAAO,MAAM,kBAAkB,oHAe9B,CAAC"}

package/dist/index.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRenderProfiler = exports.useRenderProfiler = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const defaultLogger = (label, payload) => {
+    // Console table keeps output readable when multiple profiled components run.
+    // eslint-disable-next-line no-console
+    console.table([{ label, ...payload }]);
+};
+const groupedStatsStore = new Map();
+const createEmptyStats = () => ({
+    renders: 0,
+    initialRenders: 0,
+    rerenders: 0,
+    totalMs: 0,
+    minMs: Number.POSITIVE_INFINITY,
+    maxMs: 0,
+    timerId: null
+});
+const scheduleReport = (componentName, stats, reportAfterMs, logger) => {
+    if (stats.timerId) {
+        clearTimeout(stats.timerId);
+    }
+    stats.timerId = setTimeout(() => {
+        const avg = stats.renders > 0 ? stats.totalMs / stats.renders : 0;
+        const payload = {
+            component: componentName,
+            renders: stats.renders,
+            initialRenders: stats.initialRenders,
+            rerenders: stats.rerenders,
+            totalMs: Number(stats.totalMs.toFixed(2)),
+            avgMs: Number(avg.toFixed(2)),
+            minMs: Number((Number.isFinite(stats.minMs) ? stats.minMs : 0).toFixed(2)),
+            maxMs: Number(stats.maxMs.toFixed(2))
+        };
+        logger(`[RenderProfiler] ${componentName}`, payload);
+    }, reportAfterMs);
+};
+const useRenderProfiler = (componentName, options = {}) => {
+    const { groupByComponent = false, reportAfterMs = 3000, logEachRender = false, enabled = true, logger = defaultLogger } = options;
+    const renderStartRef = (0, react_1.useRef)(0);
+    const instanceRenderCountRef = (0, react_1.useRef)(0);
+    const statsRef = (0, react_1.useRef)(createEmptyStats());
+    if (groupByComponent && !groupedStatsStore.has(componentName)) {
+        groupedStatsStore.set(componentName, createEmptyStats());
+    }
+    const activeStats = groupByComponent ? groupedStatsStore.get(componentName) : statsRef.current;
+    if (enabled) {
+        const now = performance.now();
+        renderStartRef.current = now;
+        activeStats.renders += 1;
+        instanceRenderCountRef.current += 1;
+        if (instanceRenderCountRef.current === 1) {
+            activeStats.initialRenders += 1;
+        }
+        else {
+            activeStats.rerenders += 1;
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            return;
+        }
+        const end = performance.now();
+        const renderDuration = end - renderStartRef.current;
+        const stats = activeStats;
+        stats.totalMs += renderDuration;
+        stats.minMs = Math.min(stats.minMs, renderDuration);
+        stats.maxMs = Math.max(stats.maxMs, renderDuration);
+        if (logEachRender) {
+            logger(`[RenderProfiler] ${componentName}#${stats.renders}`, {
+                component: componentName,
+                renders: stats.renders,
+                initialRenders: stats.initialRenders,
+                rerenders: stats.rerenders,
+                totalMs: Number(stats.totalMs.toFixed(2)),
+                avgMs: Number((stats.totalMs / stats.renders).toFixed(2)),
+                minMs: Number(stats.minMs.toFixed(2)),
+                maxMs: Number(stats.maxMs.toFixed(2))
+            });
+        }
+        scheduleReport(componentName, stats, reportAfterMs, logger);
+        return () => {
+            if (!groupByComponent && stats.timerId) {
+                clearTimeout(stats.timerId);
+                stats.timerId = null;
+            }
+        };
+    }, [activeStats, componentName, enabled, groupByComponent, logEachRender, logger, reportAfterMs]);
+};
+exports.useRenderProfiler = useRenderProfiler;
+const withRenderProfiler = (WrappedComponent, options = {}) => {
+    const wrappedName = options.componentName || WrappedComponent.displayName || WrappedComponent.name || 'AnonymousComponent';
+    const ProfiledComponent = (props) => {
+        const { enabled = true, ...restOptions } = options;
+        const resolvedEnabled = typeof enabled === 'function' ? enabled(props) : enabled;
+        (0, exports.useRenderProfiler)(wrappedName, { ...restOptions, enabled: resolvedEnabled });
+        return (0, jsx_runtime_1.jsx)(WrappedComponent, { ...props });
+    };
+    ProfiledComponent.displayName = `withRenderProfiler(${wrappedName})`;
+    return ProfiledComponent;
+};
+exports.withRenderProfiler = withRenderProfiler;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "react-render-profiler",
+  "version": "0.1.0",
+  "description": "Lightweight React render and rerender profiler",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc -w",
+    "test": "jest",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint --ext .ts --ext .tsx ."
+  },
+  "author": "Bohdan Surai",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bsurai/react-render-profiler.git"
+  },
+  "homepage": "https://github.com/bsurai/react-render-profiler#readme",
+  "bugs": {
+    "url": "https://github.com/bsurai/react-render-profiler/issues"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "performance",
+    "profiler",
+    "render",
+    "rerender"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^18.19.130",
+    "@types/react": "^19.2.2",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "react-dom": "^19.2.5",
+    "ts-jest": "^29.4.9",
+    "typescript": "4.9.5"
+  }
+}