Bug: TBT of website increased after migrating to react 18

[sachTyagi]

trafficstars

After upgrading to react18 total blocking time of website has been increased as per the reports of lighthouse. url used to check performance: https://pagespeed.web.dev/ Following packages were updated to latest: "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.2",

React version: 18.2.0

Steps To Reproduce

1. Update the above mentioned packages to latest.
2. Use react new hydrateRoot api

Link to code example:

Attaching screenshots for performance analysis:

react18:

react17:

[gaearon]

We can’t help or guess without a complete reproducing example.

[Mayank-sudo]

it does,t work if i didn,t get full reproducing example

[alanmoo]

FWIW Our site saw this too. It's an entirely client-side rendered application. Some core pieces of it are React Router, Apollo, Final Form, Redux, and deep in our component library is JSS (which I'm trying to remove). I'm posting this mainly in the hope that someone else will see this and recognize a commonality, as this issue was the top result on Google.

[gaearon]

Do you have a live site I could debug?

[gaearon]

@sachTyagi Same question to you. I only just realized that there's a URL in your report. Can you deploy the two versions on two domains side by side again? Then I could dig into this.

[GRboss]

Hi all. So what happened? What was the root cause?

[shailesh108]

We are also facing the same issue, and i have noticed that framework.js is taking much time. also it's random sometime it takes less and sometimes it too high

"react": "^18.2.0", "react-dom": "^18.2.0",

also we are using it with Nextjs 14.0.0

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!