[Umbrella] Releasing Time Slicing

[gaearon]

Let's use this to track what's missing before Time Slicing is usable internally and in open source.

(Note: the list below is very outdated and doesn't reflect the actual amount of work that went into this)

Initial release (MVP)

Core

• Decide on the recommended low/high pri split pattern
• Fix unstable_deferredUpdates not being respected in interactive event handlers (reproducible in the fixture) Remove buggy unstable_deferredUpdates() #13488
• Fix or provide a workaround for an issue with a chain of synchronous commits on expiration (reproducible in the fixture) Add a failing test for unnecessary commits #13483
• Resuming
• Off-screen <div hidden> API

Scheduler

• Decide on naming (@flarnie, React Core team)
• Adding support for priority (@flarnie)
  • May involve bikeshedding, iteration
  • Will require changes to React Fiber Scheduler
  • Add a fixture showing using JS Scheduler with React and also external JS
• Better handle when tab is backgrounded (@flarnie)
• Improvements to polyfill for rAF
• Integrate and dogfood with internal FB products - see internal task T32773869 (@flarnie)
• Create final API which is not renderer-dependent
• Make react-dom depend on it, and publish it in open source (@flarnie, others internally)

---

Related: Suspense Umbrella (#13206)

[flarnie]

Thanks for creating this!
I would change

Figure out if it needs a priority API
to
Implement and try out the priority API

I can pick up that work again next week.

[gaearon]

@flarnie Feel free to edit :-)

[raibima]

hi @gaearon, questions:

1. Is time-slicing a React or ReactDOM specific feature?
2. Any reason why it's currently part of ReactDOM API as opposed to just another React.Component method (e.g., Component.prototype.deferSetState)?

[gaearon]

The unstable_deferredUpdates API is just a placeholder and will be removed. I imagine the actual API we’ll end up with should be renderer-independent.

[TrySound]

Will offscreen api work with fragments? Like this

<React.Fragment hidden={!visible}>
  {content}
</React.Fragment>

[NE-SmallTown]

@TrySound IIRC, React doesn't support any attribute on Fragment except one or two special(I don't remember)?

[TrySound]

@NE-SmallTown I know that Fragment supports only key prop. That's why I'm asking. This will be a quite useful feature for example in windowing.

[ccarse]

I think this needs updated since the latest release? At least it seems so from https://reactjs.org/blog/2018/10/23/react-v-16-6.html#scheduler-experimental ?

[gaearon]

Yesterday, we announced the plan for React 18 and released React 18 Alpha.

In React 18, time slicing will be opt-in rather than on by default. The way you opt into it is with startTransition (and its Hook cousin useTransition). Here is the original time slicing demo from JSConf Iceland 2018 running a recent React build with startTransition. It works pretty well!

Since time slicing is essentially implemented, I am closing this issue. Please refer to the blog post for more information about the release, including the projected timeline. Thank you for bearing with us on this journey.

[gaearon]

Some more examples:

• Code Examples reactwg/react-18#58 (comment)
• Code Examples reactwg/react-18#58 (reply in thread)