Adding time-slicing with startTransition to prevent hydration from blocking the main thread for too long for those users who immediately scroll.
#1970
Conversation
There was a problem hiding this comment.
Huh, interesting, thanks for adding this!
If you run yarn format in the root of the project, it should get rid of all the formatting changes you've pushed up and we can better see the changes you've made. Thanks!
@blittle thoughts?
Sorry, I used github web based editor so I couldn't run |
|
Tested this on a larger page that gets ~94 on lighthouse, it didn't change the score or any of the metrics really, interestingly. |
|
Thank you @sanjaiyan-dev! I think I'd like to play around with this a bit more and discuss with the team before we merge. |
@blittle Can you please say is this PR is acceptable Shopify/hydrogen#1968 please |
|
Currently |
|
@sanjaiyan-dev I'm closing this in favor of Shopify/hydrogen#1970 where I can start making some direct modifications. Thank you! |
Ok 💪 |
This PR is heavily inspired from tweet by Ryan Florence.
Time slicing is the thing that keeps me firmly in the React camp. I've built so much UI in my career where user interactions can cause rapid UI updates.
Without time slicing, the main thread gets blocked and you get jank.
React 18 just solves--and hides--the problem completely.
https://twitter.com/ryanflorence/status/1547961298813497355?s=20&t=BxmSnZmZfN4nOyTVw5aOTQ
I am extremely sorry if I made any mistakes :(