[Schedule]Low priority updates block high priority updates

[koba04]

TimeSlicing is a great feature, thank you for your great works!
I've been enjoying it, but I have a problem with its scheduling.

I know the scheduler is unstable, this issue is just to tell you a prblem I have.

The problem:

If I have high priority updates and many low priority updates, low priority updates interrupt and block the high priority updates.

How to reproduce:

• Open the page https://deploy-preview-2--react-timeslicing-demo.netlify.com/
• Set "Repeat Count" 10000
• Check "Enable TimeSlicing"
• Typing long text as fast as possible

You can imagine the app is like a spreadsheet app.

You can recognize that low priority updates block high priority updates.
I guess that will become a huge problem with IME composition events.
(Try to type "こんにちは(konnnitiha)")

The following is a timeline I've measured.

The source code is here.
https://github.com/koba04/react-timeslicing-demo

The previous version that used requestIdleCallback didn't have the problem.
Because requestIdleCallback runs a registered callback only when the UI thread is idle.

The following is a version that uses requestIdleCallback.

https://react-timeslicing-demo.netlify.com/

Should I implement another way to avoid to block high priorities by low priorities?

[koba04]

The problem was solved with react@16.7.0-alpha.0.
That's great!

Here are a link and a performance timeline.

https://deploy-preview-2--react-timeslicing-demo.netlify.com/

But the latest version takes long times to change the input range.
I'll close this issue because it's another issue.

The result seems to be caused by calling getHostSibling from commitPlacement.

Here is a performance timeline.

You can recognize the difference between v16.4 and v16.7.0-alpha at the following links.

• v16.7.0-alpha.0 https://deploy-preview-2--react-timeslicing-demo.netlify.com/
• v16.4 https://react-timeslicing-demo.netlify.com/