fix: improve useThrottledCallback and useDebouncedCallback types

BREAKING CHANGE: types changed, now only one generic argument received
by `useThrottledCallback` and `useDebouncedCallback` - the original
function type.

src/useDebouncedCallback/useDebouncedCallback.ts

@@ -2,8 +2,8 @@
 import { DependencyList, useMemo, useRef } from 'react';
 import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
 
-export interface IDebouncedFunction<Args extends any[], This> {
-  (this: This, ...args: Args): void;
+export interface IDebouncedFunction<Fn extends (...args: any[]) => any> {
+  (this: ThisParameterType<Fn>, ...args: Parameters<Fn>): void;
 }
 
 /**
@@ -15,15 +15,15 @@ export interface IDebouncedFunction<Args extends any[], This> {
  * @param maxWait The maximum time `callback` is allowed to be delayed before
  * it's invoked. 0 means no max wait.
  */
-export function useDebouncedCallback<Args extends any[], This>(
-  callback: (this: This, ...args: Args) => any,
+export function useDebouncedCallback<Fn extends (...args: any[]) => any>(
+  callback: Fn,
   deps: DependencyList,
   delay: number,
   maxWait = 0
-): IDebouncedFunction<Args, This> {
+): IDebouncedFunction<Fn> {
   const timeout = useRef<ReturnType<typeof setTimeout>>();
   const waitTimeout = useRef<ReturnType<typeof setTimeout>>();
-  const lastCall = useRef<{ args: Args; this: This }>();
+  const lastCall = useRef<{ args: Parameters<Fn>; this: ThisParameterType<Fn> }>();
 
   const clear = () => {
     if (timeout.current) {
@@ -70,7 +70,7 @@ export function useDebouncedCallback<Args extends any[], This>(
         if (maxWait > 0 && !waitTimeout.current) {
           waitTimeout.current = setTimeout(execute, maxWait);
         }
-      } as IDebouncedFunction<Args, This>;
+      } as IDebouncedFunction<Fn>;
 
       Object.defineProperties(wrapped, {
         length: { value: callback.length },

src/useDebouncedEffect/useDebouncedEffect.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { DependencyList, useEffect } from 'react';
 import { useDebouncedCallback } from '..';
 
@@ -13,7 +14,6 @@ import { useDebouncedCallback } from '..';
  * before it's force execution. 0 means no max wait.
  */
 export function useDebouncedEffect(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   callback: (...args: any[]) => void,
   deps: DependencyList,
   delay: number,

src/useThrottledCallback/useThrottledCallback.ts

@@ -2,8 +2,8 @@
 import { DependencyList, useMemo, useRef } from 'react';
 import { useUnmountEffect } from '..';
 
-export interface IThrottledFunction<Args extends any[], This> {
-  (this: This, ...args: Args): void;
+export interface IThrottledFunction<Fn extends (...args: any[]) => any> {
+  (this: ThisParameterType<Fn>, ...args: Parameters<Fn>): void;
 }
 
 /**
@@ -16,14 +16,14 @@ export interface IThrottledFunction<Args extends any[], This> {
  * `delay` milliseconds, otherwise, callback will be executed one final time
  * after the last throttled-function call.
  */
-export function useThrottledCallback<Args extends any[], This>(
-  callback: (this: This, ...args: Args) => any,
+export function useThrottledCallback<Fn extends (...args: any[]) => any>(
+  callback: Fn,
   deps: DependencyList,
   delay: number,
   noTrailing = false
-): IThrottledFunction<Args, This> {
+): IThrottledFunction<Fn> {
   const timeout = useRef<ReturnType<typeof setTimeout>>();
-  const lastCall = useRef<{ args: Args; this: This }>();
+  const lastCall = useRef<{ args: Parameters<Fn>; this: ThisParameterType<Fn> }>();
 
   useUnmountEffect(() => {
     if (timeout.current) {
@@ -32,7 +32,7 @@ export function useThrottledCallback<Args extends any[], This>(
   });
 
   return useMemo(() => {
-    const execute = (context: This, args: Args) => {
+    const execute = (context: ThisParameterType<Fn>, args: Parameters<Fn>) => {
       lastCall.current = undefined;
       callback.apply(context, args);
 
@@ -60,7 +60,7 @@ export function useThrottledCallback<Args extends any[], This>(
       }
 
       execute(this, args);
-    } as IThrottledFunction<Args, This>;
+    } as IThrottledFunction<Fn>;
 
     Object.defineProperties(wrapped, {
       length: { value: callback.length },

src/useThrottledEffect/useThrottledEffect.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { DependencyList, useEffect } from 'react';
 import { useThrottledCallback } from '..';
 
@@ -14,7 +15,6 @@ import { useThrottledCallback } from '..';
  * after the last throttled-function call.
  */
 export function useThrottledEffect(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   callback: (...args: any[]) => void,
   deps: DependencyList,
   delay: number,

src/useValidator/__docs__/example.stories.tsx

@@ -20,8 +20,8 @@ export const ExampleStories: React.FC = () => {
         error: !isValid ? new Error('text length should be an odd length') : undefined,
       });
     },
-    150,
-    [text]
+    [text],
+    150
   );
 
   // validity state type if inferred from validator