​
React Scan

React Scan is a powerful tool for analyzing and optimizing your React applications. This guide will walk you through how to add React Scan to your Next.js project.

​
Installation

You can add React Scan to your Next.js project in two ways:

​
Method 1: Using the Script Tag

Add React Scan to your root layout by importing the Script component from Next.js:

src/app/layout.tsx
import { Script } from "next/script";

// src/app/layout.tsx
export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<head>
				<Script src="https://unpkg.com/react-scan/dist/auto.global.js" />;
				{/* Place here your Analytics script */}
			</head>
			<body>{children}</body>
		</html>
	);
}

​
Method 2: Using the React Scan Component

Install React Scan as a development dependency:

npm i react-scan

Create a new component like src/components/ReactScan.tsx:

src/components/ReactScan.tsx
"use client";
// react-scan must be imported before react
import { scan } from "react-scan";
import { JSX, useEffect } from "react";

export function ReactScan(): JSX.Element {
	useEffect(() => {
		scan({
			enabled: true,
		});
	}, []);

	return <></>;
}

Then, add the ReactScan component to your providers component or root layout:

src/components/global/providers.tsx
// src/components/global/providers.tsx

// This component must be the top-most import in this file!
import { ReactScan } from "@/components/ReactScan";

// ...

const Providers = ({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) => {
	const { theme } = useTheme();

	return (
		<ThemeProvider
			attribute="class"
			defaultTheme={config.theme.general}
			enableSystem={config.theme.general === "system"}
		>
			{/* ... */}
			<ReactScan />
			{/* ... */}
		</ThemeProvider>
	);
};

​
Usage

React Scan will automatically analyze your application and identify unused components, props, and other optimizations opportunities.

Was this page helpful?