[Bug]: Outlet component remounts in production when changing state above it

[mindnektar]

What version of React Router are you using?

6.22.1

Steps to Reproduce

I really, really wish I could offer a simple reproduction, but I can't, since this only happens in our production build and cannot be reproduced locally. Here's a very reduced pseudo-setup:

const App = () => {
    const [state, setState] = useState(0);

    useEffect(() => {
        window.setTimeout(() => {
            setState((previous) => previous + 1);
        }, 1000);
    }, []);

    return (
        <Outlet />
    );
};

const root = createRoot(document.getElementById('app'));
const router = createHashRouter([{ element: <App />, children: [...] }]);

root.render(<RouterProvider router={router} />);

The above App component rerenders once per second. In development, everything is fine and the sub tree within Outlet is not rerendered or remounted. In production, however, the Outlet component is remounted, and the entire sub tree is recreated. Through debugging I have determined the Outlet component to be the one up highest in the tree that is being remounted. App is not remounted, as one would expect.

The crazy thing is: If I replace the Outlet component with useOutlet (which is exactly what Outlet is doing internally), it works, and no remounting is happening. I have no idea how this is possible, and I have not seen any other issues related to this in the bug tracker.

Using useOutlet is a workaround I can live with, but I would really like to understand what is happening and if this is an issue with react-router. Do you have any clue what the problem might be without me having to show more of my setup? I can do that of course, but it's a lot because it's a big project, and there's no telling what might be relevant and what might not.

I'd be thankful for any help.

Expected Behavior

The Outlet component does not remount.

Actual Behavior

The Outlet component remounts.

[mindnektar]

Little follow-up: It also works completely fine if I create my own Outlet component that looks exactly like the one within react-router. As soon as I go back to the react-router one, though, the remounting happens again in production. It's nuts.

[timdorr]

This really sounds like something with your build environment that's transforming or affecting the library code to produce unexpected results. I'd go check the build output to see what code is actually being run and if it's got something in there that would change these results.