Global layout is remounted on error

[Vinorcola]

I'm using React Router as a...

framework

Reproduction

Repository

https://github.com/Vinorcola/React-router-global-layout-remount-issue

Install

Clone and run npm install in the directory.

Then, run npm run dev to start the server and open http://localhost:5173

Understand

There is a GlobalComponent (in app folder) that is mounted in the root layout. This component has it's own state that should only be initialized once during the whole app life. It is displayed at the bottom of the screen.

There is a menu with several links:

• Home: the home page
• Other: another page
• Loader eroor: a page where an error is thrown from the loader
• Unknown: an unexisting page

What's wanted

The ability to have a global component that is never unmounted, even on error.

Issue

When navigating from successfull pages to any page with error (or vice versa), the global layout is unmounted and remonted
when switching between the rendering of the global ErrorBoundary and the global App components.

Hence, there is no way to have a global component that is never unmounted, even if an error occured.

Reproduce

1. Open http://localhost:5173. Check the value displayed at the bottom of the screen.
2. Open dev console (There is an Hydration error that can be ignored, it is due to randomness of the GlobalComponent's state.)
3. Navigate from Home to Other and vice-versa. The content of the GlobalComponent does not change.
4. Navigate to either Loader error or Unknown and you'llfind that the content of GlobalComponent has changed since it as been unmounted and remounted (check console for proof).
5. From ther, navigating to Loader error & Unknown pages does not affect the state.
6. Navigate then to Home or Other, the state changes again.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 13.53 GB / 15.57 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
  npmPackages:
    @react-router/dev: ^7.4.0 => 7.4.0 
    @react-router/node: ^7.4.0 => 7.4.0 
    @react-router/serve: ^7.4.0 => 7.4.0 
    react-router: ^7.4.0 => 7.4.0 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

The root layout should not be unmounted when switching from successfull pages to error pages (or vide versa)

Actual Behavior

The root layout is unmounted and remounted when switching from successfull pages to error pages (or vide versa)

[riobits]

Oooh, do you think that's why I'm facing this issue? #13286

[mikhail-molchanov]

Experiencing the same issue on v7.4.1. This behavior is confusing, since React Router's docs explicitly state that one of the purposes of root layout is to prevent remounting the app shell:

Prevent React from re-mounting your app shell elements when switching between the root component/HydrateFallback/ErrorBoundary which can cause a FOUC if React removes and re-adds tags from your component.

[AlastairSmith21]

Experiencing the same on v7.6.0. This is quite frustrating because as outlined by mikhail the docs specify the exact opposite behaviour. We've resorted to:

1. Adding a route("/*", "routes/pages/notFound.tsx"), to our routes.tsx file.
2. Adding a loader with return Response.json(null, { status: 404 }); within the notFound.tsx to ensure the correct status code is returned.

It means that we have an error boundary scenario that we never expect to hit in our case.

[c58]

the problem is that RenderErrorBoundary renders different tree in case of an error and in other cases, which forces React to completely re-render and re-mount the app.
https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/hooks.tsx#L1057

The solution that seems to be working is to always render RouteErrorContext.Provider, then the tree will be the same in all the cases and no re-mounting will happen.

Here is the patch I use for now for 7.9.2:

react-router@7.9.2.patch