HydrateFallback being rendered intermittently on refresh in SPA without SSR

[mn-prp]

I'm using React Router as a...

library

Reproduction

I can't share a full reproduction, and if this isn't a bug, an explanation of what causes this component to be rendered would be helpful (it's not in the docs).

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M3 Pro
    Memory: 518.97 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 4.1.1 - /opt/homebrew/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
  Browsers:
    Chrome: 130.0.6723.59
    Edge: 131.0.2903.112
    Safari: 18.2
  npmPackages:
    vite: ^6.0.3 => 6.0.3

Used Package Manager

yarn

Expected Behavior

I don't use loader or any SSR features, so I don't expect HydrateFallback to be necessary, let alone to render.

The top-level skeleton of what I have is this:

export const appRoutes: RouteObject[] = [
  {
    element: <AuthWrapper />,
    hydrateFallbackElement: <>Some hydration error</>, // added this during debugging, and it does sometimes render instead of children
    errorElement: <AppCrashFallback />, 
    children: [
      {
        path: path.publicLanding,
        children: publicRoutes
      },
      {
        children: privateRoutes
      }
    ]
  }
]

export const router = createBrowserRouter(appRoutes)

The routes arrays are too complex to share, but a representative snippet would be:

      {
        element: <DefaultLayout />,
        children: [
          {
            path: path.inactiveAccount,
            lazy: () => import('../../features/accounts/routes/InactiveAccount'),
            errorElement
          },
          {
            path: path.subscribe,
            lazy: () => import('../../features/accounts/routes/Subscribe'),
            errorElement
          }
        ]
      }

Actual Behavior

Everything renders fine on the first page render always, but refreshing the page triggers the hydration fallback error maybe 20-30% of the time, which suggests a race condition.

I put in some debug logging into the render function of the top-level layout and it never renders, although parent context providers to the whole router do render as expected.

This behavior seems like a bug in react router (since I did not opt into any SSR features, so I would expect errors elsewhere in my application to trigger the errorElement not the hydrateFallbackElement. In fact, I was genuinely surprised to find that that element event could be rendered when we don't use loader or anything other than lazy loaders (and their failure really ought to be an errorElement render, if they happen -- which I don't believe to be happening in my case).

But if it's a bug in our company's code, I'd at least appreciate some indication in the docs to help point people in the direction of how to debug this kind of thing.

[timdorr]

This is very likely a browser extension causing the problem. What happens if you use a private/incognito window with no extensions enabled? I've had this exact same problem with Grammarly installed, for instance.

[mn-prp]

Interesting. It happens to me in Chrome with no extensions installed. (My primary browser is Firefox, which is where I noticed the issue, but I switched to Chrome and the issue persists)

[timdorr]

Can you upgrade to React 19? It is more forgiving about hydration issues.

[mn-prp]

Unfortunately, I already am.

    "react-router": "^7.1.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",