render-tracestable

Trace React render propagation — see which component triggered a cascade, how deep it went, and which components were dragged along. Dev-only, zero production cost.

Install: pnpm add @sapanmozammel/render-trace

⚠ render cascade

A parent state update propagates through three instrumented levels. Watch the console to see the propagation tree — root trigger, depth, and all nodes in one cycle.

<Parent>root#1

<Child>#1

<GrandChild>#1

Trigger a cascade above — the cycle will appear here

▸How to add this to your component

import { useTraceRender } from '@sapanmozammel/render-trace';

const Dashboard = (props) => {
  useTraceRender('Dashboard');
  return <UserList />;
};

const UserList = () => {
  useTraceRender('UserList');
  return users.map((u) => <UserCard key={u.id} user={u} />);
};

Dev-only. Open DevTools console to see the grouped propagation tree — root trigger, depth, and all nodes in one cycle entry.