Getting an unexpected double render with my Plasmic project

Having a really strange issue that I think I’ve narrowed down to my Project

I set up a blank repo to recreate. If you change the credentials, check the console log and navigate between the links. You’ll see a double render with the bottom creds. I can’t find any settings to recreate this problem, but it’s been plaguing me for a while

https://codesandbox.io/s/plasmic-double-render-uwnflx?file=/plasmic-init.ts

this is the difference between the project keys. My main project double-renders on every page view, where the test project using the same codebase only renders once. I can’t find any differences in the projects or components - I tried to set them up identically

Hi @efficient_pelican! Is this issue still happening? I just tried to make the changes you mentioned to use the project ID at the bottom, but it still seems to render each page only once (see the video below): https://codesandbox.io/s/plasmic-double-render-forked-wwy8fv?file=/plasmic-init.ts

test_double_render.gif

yeah does this not double-log for you - clicking between the links? https://uwnflx.sse.codesandbox.io/collections/skincare

@victor thanks for looking at this

@victor any ideas? we’re in a holiday launch cycle and we’re kinda stuck as this is messing with the animations we built

Hi @efficient_pelican! Sorry, we’re still trying to figure out the root cause. However, if it helps, it seems that removing the Full Width variant from Collection.Template seems to fix it somehow

@victor Interesting. Though I believe it’s happening across all components. Could this be something with global variants? I don’t have any but I have created in the past

it seems to be related with a recent change on normal variants - we’re still investigating what exactly is causing it

hi @efficient_pelican!

Looks like it’s related to React 18’s concurrent rendering.

It seems React expects to rerender the entire tree in some situations when it’s doing concurrent rendering, even if no React rule is violated (see here and here).

The second re-render of most components (including App and Template) is not caused by any change in props or state and it happens to the entire tree. In general it should be safe since the render function is expected to be pure.

I’d be happy to look into the animations issue, it might have been caused by a component that doesn’t support concurrent rendering - feel free to DM to point me the repo if it’s OK for you!