Remix Guide

As a script tag

Add the script tag to your <Layout> component in app/root.

Refer to the CDN Guide for the available URLs.

// app/root.jsx
import {
  Links,
  Meta,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* Must run before any of your scripts */}
        <script src="https://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>
  );
}

// ...

Caution

This only works for React 19

As a module import

Add the following code to your app/root:

// app/root.jsx
import { scan } from "react-scan"; // Must be imported before Remix
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export function Layout({ children }) {
  useEffect(() => {
    // Make sure to run React Scan 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 />;
}

If you want react-scan to also run in production, use the react-scan/all-environments import path

- import { scan } from "react-scan";
+ import { scan } from "react-scan/all-environments";

Caution

React Scan must be imported before React (and other React renderers like React DOM), as well as Remix, in your entire project, as it needs to hijack React DevTools before React gets to access it.

Alternatively you can also do the following code in app/entry.client:

// app/entry.client.jsx
import { RemixBrowser } from "@remix-run/react";
import { StrictMode, startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
import { scan } from "react-scan";

scan({
  enabled: true,
});

// Hydration must happen in sync!
// startTransition(() => {
hydrateRoot(
  document,
  <StrictMode>
    <RemixBrowser />
  </StrictMode>
);
// });

Caution

This only works for React 19

2.6 KiB Raw Permalink Blame History

Remix Guide

As a script tag

As a module import

2.6 KiB

Raw Permalink Blame History