Complete support for leading, trailing, maxWait #62
Conversation
this fixes jestjs/jest#2234 and allows us to properly mock the combination of setTimeout and Date.now()
This matches the behaviour of lodash's debounce and uses a lot of the lodash code.
|
Great, thank you for the PR @tryggvigy! At the moment, some unit tests have fallen, could you please check them? https://github.com/xnimorz/use-debounce/pull/62/checks?check_run_id=1053379621 I'll review this PR the next day (as it's 1 A.M. in my location) |
|
Done, it's past midnight here as well 😄 |
| isComponentUnmounted.current = true; | ||
| }; | ||
| // Bypass `requestAnimationFrame` by explicitly setting `wait=0`. | ||
| const useRAF = !wait && wait !== 0 && typeof window.requestAnimationFrame === 'function'; |
There was a problem hiding this comment.
When we call useDebouncedCallback during SSR, we could get ReferenceError: window is not defined, as we try to access requestAnimationFrame field in the undefined object.
I think this code could be improved, if the whole check will be the following:
const useRAF = !wait && wait !== 0 && typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function';
There was a problem hiding this comment.
Yeah, I mentioned this in the PR description. Lodash uses an even more complicated check to resolve the global object but maybe keeping it simple like you suggest is enough. Not familiar with the pros/cons
|
I'll merge and fix some problems with SSR. I'll write here when I release a new version. |
|
Thank you for the PR, @tryggvigy |
|
Nice, thanks @xnimorz |
|
Published |
This PR
useDebouncedCallbackto mirror lodash's implementation of debounce.waitwait: 200, {leading: true, trailing: false, maxWait: 200}This is a lot of changes to the source code but it was easier to start with lodash code and work backwards from there. Let me know what you think.
Things to note
window.requestAnimationFrame. I'm not an experienced library author so I'm not sure if this is safe in all contexts (server side rendering, etc.). Looks like lodash uses https://github.com/lodash/lodash/blob/master/.internal/root.js to choose the right global object. I guess this is infamously painful in the JS ecosystem :)