Bug: Different Behaivor between useTransition and useDeferredValue

[yousefdawood7]

i spot the difference in how useTransition and useDeferredValue being interrupted by high priority state

when i use useTransition and the transition is on going
and trying to update any other state (that's not in transition) it interrupt the Transition as expected but after couple of seconds of constantly update the state the transition somehow block the ui and update the state like it's updated synchronously

and here is simple the code: https://codesandbox.io/p/sandbox/9hvkwd

when i click on the Post's tab and then quickly before the transition finished constantly update the counter
after couple of seconds the transition will block the ui untill it's finished and painted

but in the useDefferedValue when i interrupt the rendering that attach with the useDeferred it will ALWAYS be interrupted unill i stop typing for example (and that's the expected behavior) then it'll be updated if there is not any high priority stuff going on

[yousefdawood7]

@eps1lon
why the different behavior between these two ?
useTransition supposed to not block the UI right ?

[kuomars110]

i spot the difference in how useTransition and useDeferredValue being interrupted by high priority state

when i use useTransition and the transition is on going and trying to update any other state (that's not in transition) it interrupt the Transition as expected but after couple of seconds of constantly update the state the transition somehow block the ui and update the state like it's updated synchronously

and here is simple the code: https://codesandbox.io/p/sandbox/9hvkwd

when i click on the Post's tab and then quickly before the transition finished constantly update the counter after couple of seconds the transition will block the ui untill it's finished and painted

but in the useDefferedValue when i interrupt the rendering that attach with the useDeferred it will ALWAYS be interrupted unill i stop typing for example (and that's the expected behavior) then it'll be updated if there is not any high priority stuff going on

useTransition: Low-priority work → eventually flushed if pending too long → may block UI briefly when it finishes.
useDeferredValue: Low-priority work → will always be interrupted until idle → never blocks short-term.

This is due to how React schedules work for each hook

[pranavi79]

Hi sorry if I am late, but this is what helped me understand the difference better when I was reading on React 19.
As of React 18, concurrency was introduced via lanes. React uses lanes to park tasks into different buckets according to priority. useTransition, often used with animation is parked in Transition Lane and useDefferedValue, often used for fast changing value (think search query, where the UI must be responsive but the recommendations can take their own sweet time) in Idle Lane (idle-ish almost).
Transition Lane has a higher prority than Idle Lane. Tasks in Transition Lane will be held back if there are tasks of higher priority, but due to NOT being least important will be executed, eventually. This isn't the case for tasks for Idle Lane, which can not be stalled, but might never get executed.

[yousefdawood7]

@pranavi79
if i didn't get you wrong. based on what you said it's not supposed to block the ui while updating high priority state like in my example right ?

[pranavi79]

@yousefdawood7 useDeferredValue will not block, but useTransitionalValue will because transition lane > idle lane

[asiftonim]

ghgg

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!