Out-of-order updates with React Concurrent Mode

Bug

What’s the current behavior?

When using Slate with Concurrent React (via ReactDOM.createRoot) on the experimental release channel), updates (to the node list?) can occur out of order resulting in text being appended after the cursor.

https://codesandbox.io/s/slate-050-basic-x-concurrent-mode-bug-qnxqu

Slate: 0.55.3 React: Experimental, 16.8.6 with unstable_createRoot Browser: Chrome OS: Mac

What’s the expected behavior?

Updates stay in order no matter how fast the user types.

Suggested Solutions

It seems like this could have to do with either batchedUpdates or scheduler, but I’m not exactly sure. I don’t know enough about the internals of Slate to give more detail, but worth getting ahead of this IMHO.

[gaearon]

Basically, we now run updates synchronously by default, and even if we’re going to relax this in some future majors for some events, we’ll keep that behavior for keyboard, clicks, and so on. And then if you want to opt out, useTransition is your entry point to time slicing.

[kyarik]

@jaredpalmer Thanks for mentioning ReactDOM.unstable_discreteUpdates. That led me to do some research. discreteUpdates definitely helps, but as you pointed out, it’s not perfect, as there are still some cases in which the cursor gets left behind.

ReactDOM.unstable_discreteUpdates runs the function you provide with a UserBlockingPriority, which is a high priority, but not the highest.

On the other hand, ReactDOM.flushSync and ReactDOM.flushControlled run the function you provide with ImmediatePriority, which is the highest priority. ReactDOM.flushControlled is still unstable, so it’s available as unstable_flushControlled.

Therefore, a possible fix to the issue is to wrap setValue(val) in either of those two functions. So,

const handleChange = useCallback(val => {
  ReactDOM.flushSync(() => {
    setValue(val);
  });
}, []);

or

const handleChange = useCallback(val => {
  ReactDOM.unstable_flushControlled(() => {
    setValue(val);
  });
}, []);

With this change, the original issue seems no longer reproducible.

BTW, you misspelled @gaearon, so I don’t think he got notified about this thread.