When transitioning between page components plane is mis-positioned

[joehuggans]

I am using react-router-dom to create various routes for page components.

I have just noticed that if you transition between pages the planes on the page are out of position.

This position issue is corrected if you resize the browser window.

[martinlaxenaire]

Hi @joehuggans,

Route transitions are always a pain with React, I've tried a few things for now but I didn't push the experiments too far.
Could it be that you need to update the scroll values by calling curtains.updateScrollValues(0, 0) when your route changes?
A codesandbox demonstrating the issue might help here.

Cheers,

[joehuggans]

Ok, thanks. I will create a codesandbox very soon to try figure this out.

[MrUltimate]

Hey @joehuggans were you ever able to figure this out?

[joehuggans]

Hi @MrUltimate sorry no never did figure it out, we ended up for the time being only using this plugin on pages with no scroll, the plan was to come back to this issue later.

[martinkosmela]

Hi @martinlaxenaire When I tried to take advantage of this plugin in Next.js App (v. 13, React 18) I've encountered similar problems as @joehuggans and @noelsner from issue #15 .

The Plane is rendered correctly on direct URL, but after using internal navigation it's not rendered and the error below show up in the console:

Plane: Unable to create a Plane because the Renderer WebGL context is not defined

I've prepared the code sandbox with simplified version of my project implementation (Plane component can be found under /theme).

I found out, that there are no problems at all after disabling reactStrictMode in next.config.js, but it is not an option in my project.

Did you have any change to take a look on this issue since it got raised for the first time?
I was thinking about trying to rerender the Plane in useCurtains hook? Is there any solution for this?

I would appreciate any help

[martinlaxenaire]

Hi @martinkosmela,

I think your issue is related to the useEffect hook being executed twice on strict mode / development environement. See: https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode

My take is that it executes the return function once therefore disposing the webgl context: https://github.com/martinlaxenaire/react-curtains/blob/main/src/components/Curtains.js#L80

Unfortunately this was introduced in React after I first published this package, and I did not have time to look further into it since.

Any suggestion / PR on how to get rid of that side effect would be appreciated.

[SKukreja]

I'm experiencing this same issue. I can confirm I don't have StrictMode enabled...

[SKukreja]

Follow-up: I was able to work around this by updating my plane's position in its onRender callback, which I thought would have some performance implications... but seems to work okay for now?

const onRender = (plane) => {
    plane.updatePosition();
};

I tried applying this to all my planes and it resolved any issues related to this, but I'm sure it isn't an ideal solution.

Fingers crossed it doesn't come up as I test further.