Install React Scan in your Create React App (CRA) project using either a script tag or module import.
Script Tag Method
Open your index.html
Navigate to public/index.html.
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>
<!-- rest of your scripts go under -->
</head>
<body>
<div id="root"></div>
</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 (src/index.js 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";
import "./index.css";
scan({
enabled: true,
});
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
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.