Install React Scan in your React Router v7 project using either a script tag or module import.
Some features only work with React 19. Make sure your project is using a compatible React version.
Script Tag Method
Open your root file
Navigate to app/root.tsx (or app/root.jsx).
Add the script tag to your Layout
Add the React Scan script to your Layout component:import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<script
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
/>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
Module Import Method
Install the package
npm install -D react-scan
Add to your root file
Import React Scan in your app/root.tsx:// Must be imported before React Router
import { scan } from "react-scan";
import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
import { useEffect } from "react";
export function Layout({ children }) {
useEffect(() => {
// Make sure to run react-scan only after hydration
scan({
enabled: true,
});
}, []);
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
React Scan must be imported before React, React DOM, and React Router in your entire project, as it needs to hijack React DevTools before React gets to access it.
Running in Production
By default, React Scan only runs in development. To enable it in production:
- import { scan } from "react-scan";
+ import { scan } from "react-scan/all-environments";
Running React Scan in production is not recommended as it may impact performance.