Add multi-param support to useDebounce, add useDebouncedValue #87
Conversation
…nce, also added useDebouncedValue
nick-prat
requested review from
anicioalexandre,
deboracosilveira and
ficast
|
| } | ||
|
|
||
|
|
||
| export {useDebounce as default, useDebouncedValue} |
There was a problem hiding this comment.
I've exported as default here, as it's the current behaviour.
| @@ -20,4 +20,21 @@ const useDebounce = <T extends (params: any) => any>( | |||
| return { debouncedFunction: debouncedFuncRef.current } | |||
There was a problem hiding this comment.
I also wanted to ask why we return this as an object instead of just the value?
There was a problem hiding this comment.
I don't think there was a real reason for that at the time, I guess because we were thinking about returning more data. I'm ok to return only the function instead
| const useDebounce = <T extends (params: any) => any>( | ||
| functionToDebounce: T, | ||
| const useDebounce = <T extends any[], U>( | ||
| functionToDebounce: (...params: T) => U, |
There was a problem hiding this comment.
I don't understand why we would need to manually define a return type here, could you explain?
There was a problem hiding this comment.
I guess this could have been
const useDebounce = <T extends (...params: any[]) => any>(
functionToDebounce: T,
{ debounceTime = 400 } = {},
) => ...I just added it as it's how I'd personally write this generic, but I think it's the same thing functionally.
| @@ -20,4 +20,21 @@ const useDebounce = <T extends (params: any) => any>( | |||
| return { debouncedFunction: debouncedFuncRef.current } | |||
There was a problem hiding this comment.
I don't think there was a real reason for that at the time, I guess because we were thinking about returning more data. I'm ok to return only the function instead
| @@ -20,4 +20,21 @@ const useDebounce = <T extends (params: any) => any>( | |||
| return { debouncedFunction: debouncedFuncRef.current } | |||
| } | |||
|
|
|||
| export default useDebounce | |||
| const useDebouncedValue = <T>(value: T, debounceTime: number) => { | |||
There was a problem hiding this comment.
maybe we move this to its own file?
|
Updated the
useDebounceto allow for more than one parameter.useDebouncedValue lets you debounce a value instead of function, something like
this lets the UI update immidietly be tracking
searchValuebut thedebouncedSearchValueonly updated after 150ms (and only once per 150ms period)@deboracosilveira I believe you originally wrote the
useDebouncedValuefor WAYS 😄