react-render-recorder captures per-commit React hook value changes and formats them for AI-assisted analysis with models like GPT, Claude, and Gemini.
Suspense updates are not supported.
Paste the recorder script into your app before the React app runs.
<script
crossorigin="anonymous"
src="https://unpkg.com/react-render-recorder@0.1.3/dist/react-render-recorder.js"
></script>Examples live in the example directory.
The Vite example loads the recorder script in index.html.
<script
crossorigin="anonymous"
src="https://unpkg.com/react-render-recorder@0.1.3/dist/react-render-recorder.js"
></script>In the App Router, load the recorder from the root layout with next/script.
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Script
crossOrigin="anonymous"
src="https://unpkg.com/react-render-recorder@0.1.3/dist/react-render-recorder.js"
strategy="beforeInteractive"
/>
{children}
</body>
</html>
);
}In the Pages Router, load the recorder from the custom document with next/script.
import { Head, Html, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
crossOrigin="anonymous"
src="https://unpkg.com/react-render-recorder@0.1.3/dist/react-render-recorder.js"
strategy="beforeInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Append boolean query parameters to the page URL to enable recorder options by default: ?shortcut=true&other-option=true.
| Option | Effect |
|---|---|
shortcut |
Start with the Ctrl+R recording shortcut already enabled |
- Record one suspicious interaction at a time so the captured hook changes are easier to analyze.
- If the commit count is higher than expected, first check whether the same component and hook changed repeatedly in
Hook history. - Use the component name filter when you only want to send one part of the render flow to an AI model.
react-render-recordercaptures hook value changes only. It does not directly capture other re-render causes such as prop changes, parent re-renders, context changes, or memoization misses.- This is a development tool for render analysis and debugging. Avoid shipping it in production user-facing paths.
- Paint grouping only works when React yields through
MessageChannel. If React does not useMessageChannelfor the recorded flow, paint grouping may be missing or inaccurate.
The recorder depends on react-devtools-custom, which lives in the mdm317/react fork and is wired in as a git submodule under react. The fork's devtools-custom branch already ships a pre-built packages/react-devtools-custom/dist/, so no separate build step is needed for the submodule.
# Clone with submodule (or init after clone)
git clone --recurse-submodules <this-repo>
# or, for an existing clone:
git submodule update --init --recursive
# Install workspace deps and build the recorder
pnpm install
pnpm buildTo iterate on the custom devtools, edit sources under react/packages/react-devtools-custom/src/, rebuild its dist/ in the fork, commit the new dist/ on devtools-custom, then bump the submodule pointer here with git submodule update --remote react and rerun pnpm install && pnpm build.