Install React Scan in your Astro project to monitor React components.
Script Tag Method
Open your root layout
Navigate to your root layout file (usually src/layouts/Layout.astro).
Add the script tag
Add the React Scan script with the is:inline directive:<!doctype html>
<html lang="en">
<head>
<script
is:inline
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
/>
<!-- rest of your scripts go under -->
</head>
<body>
<slot />
</body>
</html>
The is:inline directive is important for Astro to load the script correctly.
Module Import Method
Install the package
npm install -D react-scan
Add to your root layout
Import React Scan in your layout:<!doctype html>
<html lang="en">
<head>
<script>
import { scan } from 'react-scan';
scan({
enabled: true,
});
</script>
<!-- rest of your scripts go under -->
</head>
<body>
<slot />
</body>
</html>
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.