useDeferredValue does not abort running reconcile work for stale value

Do you want to request a feature or report a bug? bug

What is the current behavior? When useDeferredValue value is updated while the previous reconcile work is still running, The previous reconcile work is not aborted, and the new work is queued after it.

repro: Based on useDeferredValue example, https://codesandbox.io/s/infallible-dewdney-9fkv9

For better reproducibility i’ve made it to run longer using using timeoutMs: 30000 + while (performance.now() - now < 100) { ) and i’ve added an indicator value: Time since last key stroke https://codesandbox.io/s/intelligent-mestorf-u0p2b

• Start timeline record
• Type A B C with 1-3 sec interval between key strokes.
• See timeline, there’s work of 24 secs 8 + 8 + 8, for each key stroke
• See the values of Result #X changes to the old stale value.

This is not optimal for 2 reasons:

• We show stale data when we have something newer.
• The cpu is locked processing the old value reconcile, and the new value needs to wait.

What is the expected behavior? The prev reconcile work should be cancelled/aborted, And the new value reconcile should start immediately

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react/react-dom 0.0.0-experimental-5faf377df

[gaearon]

This is probably a bug, same as the issue where multiple startTransitions don’t always use the latest. Let’s track it here.

[gaearon]

There’s pretty major ongoing refactors that might end up addressing this. But no promises on the timing. We’ve slipped enough times that I would just say it’s ready when it’s ready. I think we’ll want to fix this before the stable release but it is still a while away.