@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/coverage/lcov-report/src/useDebouncedFunction.ts.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>115/115</span>
+                <span class='fraction'>0/117</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/6</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>115/115</span>
+                <span class='fraction'>0/117</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -178,236 +178,242 @@
 <a name='L113'></a><a href='#L113'>113</a>
 <a name='L114'></a><a href='#L114'>114</a>
 <a name='L115'></a><a href='#L115'>115</a>
-<a name='L116'></a><a href='#L116'>116</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">14x</span>
-<span class="cline-any cline-yes">14x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">14x</span>
-<span class="cline-any cline-yes">14x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
-import { useCallback, useEffect, useRef } from "react";
-import type { AnyFunction } from "./types.js";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
-&nbsp;
-/**
- * @remarks \@since 6.0.0
- */
-export type DebouncedFunction&lt;F extends AnyFunction&gt; = (
-  ...args: Parameters&lt;F&gt;
-) =&gt; void;
-&nbsp;
-/**
- * Creates a function that will only be called if it has not been called again
- * for X milliseconds.
- *
- * @example
- * Debounced Search API Requests
- * ```tsx
- * import { TextField, useDebouncedFunction, useUnmounted } from "@react-md/core";
- * import { useState } from "react";
- * import type { ReactElement } from "react";
- *
- * interface State {
- *   error?: unknown
- *   loading: boolean;
- *   results?: {
- *     // pretend some search results
- *     id: string;
- *     name: string;
- *   }[];
- * }
- *
- * function Example(): ReactElement {
- *   const [state, setState] = useState&lt;State&gt;({
- *     loading: false,
- *   });
- *   // this is only required for async actions
- *   const unmounted = useUnmounted();
- *
- *   // A new search request will be fired once every 500ms as the user types.
- *   // can't use the event here since React uses synthetic events
- *   const search = useDebouncedFunction(async (q: string) =&gt; {
- *     setState({
- *       loading: true,
- *       error: undefined,
- *       results: undefined,
- *     });
- *
- *     try {
- *       const response = await fetch('/search', {
- *         method: 'POST',
- *         headers: {
- *           'Content-Type': 'application/json',
- *         },
- *         body: JSON.stringify({ q }),
- *       });
- *       const json = await response.json();
- *
- *       if (!unmounted.current) {
- *         setState({
- *           loading: false,
- *           results: json,
- *         });
- *       }
- *     } catch (error) {
- *       if (!unmounted.current) {
- *         setState({
- *           error,
- *           loading: false,
- *         });
- *       }
- *     }
- *   }, 500);
- *
- *   return (
- *     &lt;TextField
- *       type="search"
- *       label="Search"
- *       onChange={(event) =&gt; search(event.currentTarget.value)}
- *     /&gt;
- *   );
- * }
- * ```
- *
- * @see `useThrottledFunction` for throttle behavior instead. (Call a
- * function at most once every X milliseconds).
- * @remarks \@since 6.0.0
- */
-export function useDebouncedFunction&lt;F extends AnyFunction&gt;(
-  func: F,
-  wait: number
-): DebouncedFunction&lt;F&gt; {
-  const timeout = useRef&lt;number | undefined&gt;();
-  const funcRef = useRef(func);
-  useIsomorphicLayoutEffect(() =&gt; {
-    funcRef.current = func;
-  });
-&nbsp;
-  useEffect(() =&gt; {
-    return () =&gt; {
-      window.clearTimeout(timeout.current);
-    };
-  }, []);
-&nbsp;
-  return useCallback(
-    (...args) =&gt; {
-      window.clearTimeout(timeout.current);
-      timeout.current = window.setTimeout(() =&gt; {
-        funcRef.current(...args);
-      }, wait);
-    },
-    [wait]
-  );
-}
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js"><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="branch-0 cbranch-no" title="branch not covered" >"use client";</span></span></span>
+<span class="cstat-no" title="statement not covered" >import { useEffect, useMemo, useRef } from "react";</span>
+<span class="cstat-no" title="statement not covered" >import { type CancelableFunction, type AnyFunction } from "./types.js";</span>
+<span class="cstat-no" title="statement not covered" >import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";</span>
+<span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >/**</span>
+<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
+<span class="cstat-no" title="statement not covered" > */</span>
+<span class="cstat-no" title="statement not covered" >export type DebouncedFunction&lt;F extends AnyFunction&gt; = CancelableFunction&lt;</span>
+<span class="cstat-no" title="statement not covered" >  (...args: Parameters&lt;F&gt;) =&gt; void</span>
+<span class="cstat-no" title="statement not covered" >&gt;;</span>
+<span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >/**</span>
+<span class="cstat-no" title="statement not covered" > * Creates a function that will only be called if it has not been called again</span>
+<span class="cstat-no" title="statement not covered" > * for X milliseconds.</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > * @example</span>
+<span class="cstat-no" title="statement not covered" > * Debounced Search API Requests</span>
+<span class="cstat-no" title="statement not covered" > * ```tsx</span>
+<span class="cstat-no" title="statement not covered" > * import { TextField, useDebouncedFunction, useUnmounted } from "@react-md/core";</span>
+<span class="cstat-no" title="statement not covered" > * import { useState } from "react";</span>
+<span class="cstat-no" title="statement not covered" > * import type { ReactElement } from "react";</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > * interface State {</span>
+<span class="cstat-no" title="statement not covered" > *   error?: unknown</span>
+<span class="cstat-no" title="statement not covered" > *   loading: boolean;</span>
+<span class="cstat-no" title="statement not covered" > *   results?: {</span>
+<span class="cstat-no" title="statement not covered" > *     // pretend some search results</span>
+<span class="cstat-no" title="statement not covered" > *     id: string;</span>
+<span class="cstat-no" title="statement not covered" > *     name: string;</span>
+<span class="cstat-no" title="statement not covered" > *   }[];</span>
+<span class="cstat-no" title="statement not covered" > * }</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > * function Example(): ReactElement {</span>
+<span class="cstat-no" title="statement not covered" > *   const [state, setState] = useState&lt;State&gt;({</span>
+<span class="cstat-no" title="statement not covered" > *     loading: false,</span>
+<span class="cstat-no" title="statement not covered" > *   });</span>
+<span class="cstat-no" title="statement not covered" > *   // this is only required for async actions</span>
+<span class="cstat-no" title="statement not covered" > *   const unmounted = useUnmounted();</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > *   // A new search request will be fired once every 500ms as the user types.</span>
+<span class="cstat-no" title="statement not covered" > *   // can't use the event here since React uses synthetic events</span>
+<span class="cstat-no" title="statement not covered" > *   const search = useDebouncedFunction(async (q: string) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" > *     setState({</span>
+<span class="cstat-no" title="statement not covered" > *       loading: true,</span>
+<span class="cstat-no" title="statement not covered" > *       error: undefined,</span>
+<span class="cstat-no" title="statement not covered" > *       results: undefined,</span>
+<span class="cstat-no" title="statement not covered" > *     });</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > *     try {</span>
+<span class="cstat-no" title="statement not covered" > *       const response = await fetch('/search', {</span>
+<span class="cstat-no" title="statement not covered" > *         method: 'POST',</span>
+<span class="cstat-no" title="statement not covered" > *         headers: {</span>
+<span class="cstat-no" title="statement not covered" > *           'Content-Type': 'application/json',</span>
+<span class="cstat-no" title="statement not covered" > *         },</span>
+<span class="cstat-no" title="statement not covered" > *         body: JSON.stringify({ q }),</span>
+<span class="cstat-no" title="statement not covered" > *       });</span>
+<span class="cstat-no" title="statement not covered" > *       const json = await response.json();</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > *       if (!unmounted.current) {</span>
+<span class="cstat-no" title="statement not covered" > *         setState({</span>
+<span class="cstat-no" title="statement not covered" > *           loading: false,</span>
+<span class="cstat-no" title="statement not covered" > *           results: json,</span>
+<span class="cstat-no" title="statement not covered" > *         });</span>
+<span class="cstat-no" title="statement not covered" > *       }</span>
+<span class="cstat-no" title="statement not covered" > *     } catch (error) {</span>
+<span class="cstat-no" title="statement not covered" > *       if (!unmounted.current) {</span>
+<span class="cstat-no" title="statement not covered" > *         setState({</span>
+<span class="cstat-no" title="statement not covered" > *           error,</span>
+<span class="cstat-no" title="statement not covered" > *           loading: false,</span>
+<span class="cstat-no" title="statement not covered" > *         });</span>
+<span class="cstat-no" title="statement not covered" > *       }</span>
+<span class="cstat-no" title="statement not covered" > *     }</span>
+<span class="cstat-no" title="statement not covered" > *   }, 500);</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > *   return (</span>
+<span class="cstat-no" title="statement not covered" > *     &lt;TextField</span>
+<span class="cstat-no" title="statement not covered" > *       type="search"</span>
+<span class="cstat-no" title="statement not covered" > *       label="Search"</span>
+<span class="cstat-no" title="statement not covered" > *       onChange={(event) =&gt; search(event.currentTarget.value)}</span>
+<span class="cstat-no" title="statement not covered" > *     /&gt;</span>
+<span class="cstat-no" title="statement not covered" > *   );</span>
+<span class="cstat-no" title="statement not covered" > * }</span>
+<span class="cstat-no" title="statement not covered" > * ```</span>
+<span class="cstat-no" title="statement not covered" > *</span>
+<span class="cstat-no" title="statement not covered" > * @see `useThrottledFunction` for throttle behavior instead. (Call a</span>
+<span class="cstat-no" title="statement not covered" > * function at most once every X milliseconds).</span>
+<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
+<span class="cstat-no" title="statement not covered" > */</span>
+<span class="cstat-no" title="statement not covered" >export function useDebouncedFunction&lt;F extends AnyFunction&gt;(</span>
+<span class="cstat-no" title="statement not covered" >  func: F,</span>
+<span class="cstat-no" title="statement not covered" >  wait: number</span>
+<span class="cstat-no" title="statement not covered" >): DebouncedFunction&lt;F&gt; {</span>
+<span class="cstat-no" title="statement not covered" >  const timeout = useRef&lt;number | undefined&gt;();</span>
+<span class="cstat-no" title="statement not covered" >  const funcRef = useRef(func);</span>
+<span class="cstat-no" title="statement not covered" >  useIsomorphicLayoutEffect(() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    funcRef.current = func;</span>
+<span class="cstat-no" title="statement not covered" >  });</span>
+<span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >  useEffect(() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    return () =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      window.clearTimeout(timeout.current);</span>
+<span class="cstat-no" title="statement not covered" >    };</span>
+<span class="cstat-no" title="statement not covered" >  }, []);</span>
+<span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >  return useMemo(() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    const debounced: DebouncedFunction&lt;F&gt; = (...args) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      window.clearTimeout(timeout.current);</span>
+<span class="cstat-no" title="statement not covered" >      timeout.current = window.setTimeout(() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        funcRef.current(...args);</span>
+<span class="cstat-no" title="statement not covered" >      }, wait);</span>
+<span class="cstat-no" title="statement not covered" >    };</span>
+<span class="cstat-no" title="statement not covered" >    debounced.cancel = () =&gt; window.clearTimeout(timeout.current);</span>
+<span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >    return debounced;</span>
+<span class="cstat-no" title="statement not covered" >  }, [wait]);</span>
+<span class="cstat-no" title="statement not covered" >}</span>
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -415,7 +421,7 @@ export function useDebouncedFunction&lt;F extends AnyFunction&gt;(
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-03-23T14:08:29.533Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/useDropzone.ts.html

@@ -751,7 +751,7 @@ export function useDropzone(options: DropzoneOptions): DropzoneHookReturnValue {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../prettify.js"></script>
         <script>