You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To my surprise, everytime I typed a letter, the watchEffect triggered and printed the value of query. What I expected to happen was that the console.log was debounced and only after I didn't type anything for 500ms, the current value will be printed.
I went to read the source of useDebounce and discovered that the setter of the returned Ref isn't actually debounced. Instead, only changes to the original Ref are reflected debouncedly. What I needed to write was
Thinking a bit more about the issue, a couple of questions popped up.
In the current form, writes to the debounced Ref are not reflected back to the original Ref. Is this intended? If not, maybe useDebounce should return a Readonly<Ref<T>>?
In that case a new function similar to my last code snippet would make sense that doesn't take a Ref as an argument and returns a mutable Ref where changes are debounced.
Alternatively, it could be decided that writes to a Ref returned by useDebounce are allowed and are reflected back to the original Ref. However, this could be a breaking change for clients that rely on the current behavior.
Yeah, that was expected. At the time it was written, Vue 2 does not support the readonly API, but it does now. Thank you for spotting this and if you want, I'd be appreciated for a PR.
I was playing around with
useDebounce
and wrote the following componentTo my surprise, everytime I typed a letter, the
watchEffect
triggered and printed the value ofquery
. What I expected to happen was that theconsole.log
was debounced and only after I didn't type anything for 500ms, the current value will be printed.I went to read the source of
useDebounce
and discovered that the setter of the returnedRef
isn't actually debounced. Instead, only changes to the originalRef
are reflected debouncedly. What I needed to write waswhich seems a bit verbose. So I modified my code to the following which did what I wanted
My proposal is to modify
useDebounce
so that setting values on the debouncedRef
are also debounced.The text was updated successfully, but these errors were encountered: