Loaders executing twice under StrictMode

[sazzer]

I've just tried converting my app to use a Loader instead of a wrapper component with useEffect. And, in general, it works fine. However, the loader is running twice under strict mode where it wasn't before.

In general this is ok. However, in my case it's a problem. The loader is handling the callback from authentication, so it's going and making the XHR call to obtain an access token. And this call only ever works once - after which the authorization code is used and subsequent calls fail. So, when my loader runs twice, one of them will succeed and the other will fail.

Note that this is not a problem if I remove StrictMode, or if I run under production settings, then this problem goes away because the double-render that StrictMode does also goes away.

So, is there some way to ensure that the loader only runs once and not twice under this condition?

Cheers

[brophdawg11]

It sounds like you're kicking off navigations in renders or effects which could cause them to navigate twice which would run loaders twice. Instead, you should be navigating via link clicks (which will only fire once) or if you need to redirect, do that from a loader as well instead of a useEffect in render.

[sazzer]

Navigation in this case is from outside of the page. So the flow is:

• User clicks on "Log In" button
• Redirected to AWS Cognito
• AWS authenticates them
• Redirected back to my app
  • This is the point that the loader is running twice. And therefore is trying to call AWS for an access token twice with the same callback details, and obviously whichever one ends up getting processed second will fail.

However, from log statements I can also see it getting called twice if I just hit browser refresh on a page.

[brophdawg11]

Can you provide a reproduction?

[sazzer]

Here you go:

import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';

function App() {
  const router = createBrowserRouter([
    {
      loader: completeLogin,
      children: [
        {
          path: '/*',
          element: <div>Root</div>
        }
      ]
    }
  ]);

  return <RouterProvider router={router} />;
}

async function completeLogin() {
    console.log('In loader: ' + new Date().getTime());

    return null;
}

export default App

If you do that, then hit refresh on the page, you'll see two instances of the "In loader" log, either in the same millisecond or in adjacent ones:

If you remove the StrictMode wrapper then the second log goes away.

Note that this is all in a Vite app created with npm create vite@latest, picking React and TypeScript. Then replacing src/App.tsx with the above.

[brophdawg11]

Yeah - you're creating the router in the render cycle, which would mean a totally new router gets created on the second StrictMode render and thus it has a new set of state/routes/loaders. You need to create the router outside of the render cycle in the module scope: https://reactrouter.com/en/main/routers/create-browser-router

[sazzer]

Yeah - it's obvious when you say it like that :)

Cheers