React-router-dom component unmount causes react-three-fiber Context lose.

[qkrooz]

Hi there.

I'm trying to build an SPA with react-router-dom, electron, create-react-app and react-three-fiber.

Here comes the issue.

I have a Login screen in <Route component={Login} path="/"/>.
I have my Main Content screen in <Route component={Main} path="/main"/>.

So, since r-r-d UNMOUNTS the current view/component whether you switch between them. A WebGLContext loss occurs, because the <Canvas> doesn't exists anymore when you go to '/'... from '/main'

The problem gets worse.

In my Main component, I have another nested routes that some of them includes a Canvas.
Even if I'm not unmounting Main view and just switching some nested routes over there, the context loss appears.

<Route component={Home} path="/main/"/> ----? <Canvas><group>....</group></Canvas>
<Route component={Profile} path="/main/profile"/> ----? <div>...</div>
<Route component={Inventory} path="/main/inventory"/> ----? <Canvas><group>....</group></Canvas>
<Route component={Shop} path="/main/shop"/> ----? <div>...</div>

Is there any solution to permit the Canvas be unmounted after route switch?

I've tried a less complex as an example and the issue is exactly the same.

Thank you so much for your time, happy coding.

[drcmda]

I'm not sure I understand, context loss is necessary when then canvas component unmounts, without that you'd have a memory leak. When it remounts it will build a new one. there's no secret trick in react that allows a component that's being unmounted to not be, its useEffect cleanup is called and it goes away. If you don't want that you should not unmount.

To me it sounds like your problem is with RR. If you expect a component to live through route changes and somehow it doesn't the problem must be with how you set up these routes.

[drcmda]

i think this is your problem: remix-run/react-router#6804

[qkrooz]

The thread you're giving says how it works, actually rrd unmounts and mounts components on every Switch.
So, I have a Canvas in one of those components, when I Switch the WebGL Context gets destroyed, and if I return to that component which contains the Canvas, the Canvas is completely blacked out and I do not find a way to mantain the Canvas context or at least re-mount' the previous Canvas.

I'll set up more evidence to explain this issue better tomorrow, thank you very much.

[drcmda]

maybe make a very small codesandbox to demonstrate the problem.

[dangrabcad]

As drcmda says, if you don't want the GL context to go away, you can't unmount the Canvas. You should probably move the Canvas outside of the Route into the non-routed part of the page.

You just need some mechanism then for the components inside the route to supply content that will go into the canvas: this sounds like you want createPortal for that, but createPortal doesn't work between different renderers. (That is, DOM React components can't createPortal into a React-Three-Fiber parent, and vice-versa.) What you can do instead is put React elements into store state and have a component under the canvas that just pulls them out of store state and returns them, like this:

// global
const myStore = new MyFavouriteReactStoreLibrary();

function ContentFromStore() {
    const content = useStore(store => store.getContent());
    return content;
}

// in your page content
<Canvas {...canvasProps>
    <ContentFromStore>
</Canvas>
<Route component={Home} />

function Home() {
    myStore.setContent(<mesh />);
}