Adding time-slicing with startTransition to prevent hydration from blocking the main thread for too long for those users who immediately scroll.

[sanjaiyan-dev]

This PR is heavily inspired from tweet by Ryan Florence.

I am extremely sorry if I made any mistakes :(

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7d22519

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[matthewp]

Thanks @sanjaiyan-dev! Astro has client directives to control timing for components, so if you wanted to hydrate on idle you would do: <Counter client:idle />. So that part of this PR I don't think we would want. However, the startTransition part we might. Can you explain what it is that that does, and how that helps with scrolling?

[sanjaiyan-dev]

Thanks @sanjaiyan-dev! Astro has client directives to control timing for components, so if you wanted to hydrate on idle you would do: <Counter client:idle />. So that part of this PR I don't think we would want. However, the startTransition part we might. Can you explain what it is that that does, and how that helps with scrolling?

Sorry, I have removed the requestIdleCallback from the code 🙌

[sanjaiyan-dev]

Thanks @sanjaiyan-dev! Astro has client directives to control timing for components, so if you wanted to hydrate on idle you would do: <Counter client:idle />. So that part of this PR I don't think we would want. However, the startTransition part we might. Can you explain what it is that that does, and how that helps with scrolling?

According to Ryan Florence this would improve the load performance of the webpage.

And by making hydrating without blocking main thread would enhance the performance too.

---

My thoughts 💭 (might be misleading)

Astro js support multiple JavaScript Frameworks 🤩 at the time and if any of the component doing some work which is high priority/heavy we can interrupt the hydration of react component for sleeker user experience 💪🙌

[matthewp]

Thanks @sanjaiyan-dev. Can you explain exactly how startTransition improves performance? Is it something you want to do all of the time? I'm hesitant to make a change based on a claim in a tweet and would like to understand more specifics.

If startTransition were something you wanted to do all of the time why wouldn't it just be built into render(). This makes me think there is nuance here and it's possible that somethings startTransition is a good idea and sometimes it is not, so I'd like to understand that nuance before we decide on making the change or not.

[sanjaiyan-dev]

Thanks @sanjaiyan-dev. Can you explain exactly how startTransition improves performance? Is it something you want to do all of the time? I'm hesitant to make a change based on a claim in a tweet and would like to understand more specifics.

If startTransition were something you wanted to do all of the time why wouldn't it just be built into render(). This makes me think there is nuance here and it's possible that somethings startTransition is a good idea and sometimes it is not, so I'd like to understand that nuance before we decide on making the change or not.

Reference from React js Docs
Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content. This allows the user to continue interacting with the current content while rendering the update.

---

Reference from tweet by React js team
Transitions are interruptible, don’t block user input, and keep your app more responsive

[sanjaiyan-dev]

Thanks @sanjaiyan-dev. Can you explain exactly how startTransition improves performance? Is it something you want to do all of the time? I'm hesitant to make a change based on a claim in a tweet and would like to understand more specifics.
If startTransition were something you wanted to do all of the time why wouldn't it just be built into render(). This makes me think there is nuance here and it's possible that somethings startTransition is a good idea and sometimes it is not, so I'd like to understand that nuance before we decide on making the change or not.

Reference from React js Docs Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content. This allows the user to continue interacting with the current content while rendering the update.

Reference from tweet by React js team Transitions are interruptible, don’t block user input, and keep your app more responsive

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

[matthewp]

I asked the question here: https://twitter.com/matthewcp/status/1562057134967328769

[matthewp]

This will go out with the next minor release, thanks!

[sanjaiyan-dev]

This will go out with the next minor release, thanks!

Tks 💪🙌