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>
)
}
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