Search code examples
reactjsremix

How can I disable react StrictMode on remix dev?


I'm trying to build a remix application, and it seems all of my components are loaded twice. Looking at remix's code it seem like they add a React StrictMode component when rendering from dev (note that building and rendering via npm build && npm start does solve the issue).

The issue I have with this is that I'm getting 429 errors from a third-party service I'm using because of the multiple simultaneous calls.

Is there any way to disable react strict mode and still use npm dev instead of having to rebuild and start for every change I make ?

I would imagine there could be some flag to remix dev or some environment variable to set, but I couldn't find anything yet

For the record, my /app/root.tsx does not contain a strict mode so I don't see how to remove it

import { ChakraProvider } from '@chakra-ui/react'
import type { MetaFunction } from '@remix-run/node'
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react'

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: '...',
  viewport: 'width=device-width,initial-scale=1',
})

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <ChakraProvider>
          <Outlet />
        </ChakraProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}


Solution

  • Ah, I found it. So remix started to hide the app/entry.client.tsx (where the strict mode is enabled). It can be ejected by running npx remix reveal

    source: https://github.com/remix-run/remix/releases/tag/remix%401.14.0