Install React Scan in your Vite project using either a script tag or module import.
Script Tag Method
Open your index.html
Navigate to your index.html file in the project root.
Add the script tag
Add the React Scan script in the <head> section:<!doctype html>
<html lang="en">
<head>
<script
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Module Import Method
Install the package
npm install -D react-scan
Add to your entry point
Import React Scan in your entry file (e.g., src/main.tsx or src/index.tsx):// must be imported before React and React DOM
import { scan } from "react-scan";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
scan({
enabled: true,
});
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
React Scan must be imported before React and React DOM 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.