useDeferredValue hook updates the deferred value immediately instead of after background re-render about react

[quiteeasy]

Actually, the differed value is not changing immediately. It is working as stated in the docs.

React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value).

In your example everything is working right as described in docs. There are not many operations happening in background in your example so after the first render with an old value the engine immediately performs another background re-render and after finishing the first render you see an old value and almost immediately a new deferred one as the next re-render happens.

You can have a look at my code sample. Please, open the console and pay attention to isStale, query, deferredQuery variables. When console shows isStale as true it means that the value of variable is being differed at the moment you can see values of each variable in console log at every moment of code execution.