reactjsreact-router

How to turn off React StrictMode in React Router v7

If you create a fresh React Router v7 project using a command like:

npx create-react-router@latest <some-project-name>

It looks like React's Strict Mode is enabled by default. Is there a way to turn it off? I can't find any guidance from the docs.

Here's a CodeSandbox and a screenshot to better explain what I mean:

enter image description here

The specific version of the react-router NPM package is 7.1.1 if that helps.

Solution

  • You should read https://reactrouter.com/explanation/special-files#entryclienttsx

    The entry.client.tsx file is optional and it handles the hydration of your app in the client. Its default implementation uses StrictMode.

    You can create such a file yourself, or you can run

    npx react-router reveal to create the .client and .server files.

    Then, you can edit the .client one and remove the <StrictMode> part from it (if you feel you need to).