#703 Fix unstable options object in useDebounceCallback breaking debouncing

[lolmaus]

#703

This PR has two separate commits:

• a failing test case;
• a fix.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 159f567

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Pasalietis]

How about instead of removing options changing it to memorization

const {leading, trailling, maxWait} = options
const memOptions = useMemo(() => ({leading, trailling, maxWait}), [leading, trailling, maxWait])

?

[lolmaus]

This won't work.

[lolmaus]

Ah, sorry, you suggest destructuring the options object and memoizing values individually.

I'll try.

[lolmaus]

@Pasalietis I tried it and it does not work: other debounce tests start failing.

[Pasalietis]

Looks like a strange debounce functionality when an empty options object is passed.

Old tests are passing with this:

 export function useDebounceCallback<T extends (...args: any) => ReturnType<T>>(
   func: T,
   delay = 500,
-  options?: DebounceOptions,
+  { leading, trailing, maxWait }: DebounceOptions = {},
 ): DebouncedState<T> {
   const debouncedFunc = useRef<ReturnType<typeof debounce>>()
+  const memoizedOptions = useMemo(() => {
+    if (!leading && !trailing && !maxWait) return undefined
+
+    return ({ leading, trailing, maxWait })
+  }, [leading, trailing, maxWait])

   useUnmount(() => {
     if (debouncedFunc.current) {
@@ -85,7 +90,7 @@ export function useDebounceCallback<T extends (...args: any) => ReturnType<T>>(
   })

   const debounced = useMemo(() => {
-    const debouncedFuncInstance = debounce(func, delay, options)
+    const debouncedFuncInstance = debounce(func, delay, memoizedOptions)

     const wrappedFunc: DebouncedState<T> = (...args: Parameters<T>) => {
       return debouncedFuncInstance(...args)
@@ -104,12 +109,13 @@ export function useDebounceCallback<T extends (...args: any) => ReturnType<T>>(
     }

     return wrappedFunc
-  }, [func, delay, options])
+  }, [func, delay, memoizedOptions])

   // Update the debounced function ref whenever func, wait, or options change
   useEffect(() => {
-    debouncedFunc.current = debounce(func, delay, options)
-  }, [func, delay, options])
+    debouncedFunc.current = debounce(func, delay, memoizedOptions)
+  }, [func, delay, memoizedOptions])

   return debounced
 }