Using Preact, some components get rendered multiple times as duplicates

[jackyef]

Bug report

Describe the bug

When using Preact (via next-plugin-preact), some components get rendered multiple times as duplicates.

Unfortunately, I still haven't found the root cause. The only information I have right now is that the issue doesn't occur if I use React instead.

To Reproduce

Please see the following video (it's only about 1 minute) to see how to reproduce it.
https://streamable.com/nbkpuz

For references:

1. This is the site that is using preact in the video:
   • https://jackyef-git-using-preact.jackyef.vercel.app/posts/6-things-i-learned-during-my-remote-job-search
   • code: using preact jackyef/my-site#40
2. This is the site that is using react:
   • https://jackyef-git-using-react.jackyef.vercel.app/posts/6-things-i-learned-during-my-remote-job-search
   • code: Using react jackyef/my-site#39

Expected behavior

Using Preact should have the same result with using React.

System information

• OS: Windows
• Browser: Chrome
• Version of Next.js: 10.0.2
• Version of Node.js: 12.18.0
• Deployment: Vercel

Additional context

Add any other context about the problem here.

The duplicated component was rendered lazily using a combination of IntersectionObserver and next/dynamic. The code for the component can be seen here and it is rendered here. The component basically fetches data from an API using react-query and then renders some UI.

[marvinhagemeister]

Had a quick look at this and it's caused by calling hydrate() on a a previously rendered result that doesn't match what's in the virtual tree. The widget where the duplication happens is lazily loaded, but the DOM nodes of a previously loaded instance is already present in the DOM. When replacing next.js' hydrate() call with render() everything works.

Firing up a codesandbox it seems like React removes DOM nodes that are not in the virtual tree on hydration whereas Preact leaves them intact.

[srdjan]

that seems to be the same problem as preactjs/preact#2838

[jackyef]

@marvinhagemeister @srdjan Thanks for taking a look!

Interesting, I tried downgrading to next@10.0.1 and the problem no longer occurs even when I am using preact. It seems like previously, hydrate is only used for initial render, but since next@10.0.2 page navigations also call hydrate instead of render. Was this intended to help improve the performance on page navigation? cc: @Timer

[AlexMeah]

Also seeing incorrect page content with Preact in 10.0.2. Seems like dom elements aren't correctly cleaned up on route change, downgrading to 10.0.1 fixes the issue.

[developit]

It seems odd to use hydrate() as a way to update existing rendered trees - if that works it's certainly relying on unspecified behavior in react.

[Timer]

Fixed in next@^10.0.3-canary.1.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.