fix(useEvent): preserve handler context and improve typings

src/hooks/useDelayState.ts

@@ -3,7 +3,8 @@ import raf from '../raf';
 import useEvent from './useEvent';
 
 export type DelayConfig =
-  { frame: number; ms?: never } | { frame?: never; ms: number };
+  | { frame: number; ms?: never }
+  | { frame?: never; ms: number };
 
 export type SetDelayState<T> = (
   nextValue: React.SetStateAction<T>,
@@ -37,8 +38,11 @@ export default function useDelayState<T>(
     }
   });
 
-  const setDelayValue = useEvent<SetDelayState<T>>(
-    (nextValue, immediatelyOrDelay) => {
+  const setDelayValue = useEvent(
+    (
+      nextValue: React.SetStateAction<T>,
+      immediatelyOrDelay?: boolean | DelayConfig,
+    ) => {
       const delayConfig = immediatelyOrDelay || { frame: 1 };
       cancelPending();
 

src/hooks/useEvent.ts

@@ -1,21 +1,42 @@
-import * as React from 'react';
-
-const useEvent = <T extends ((...args: any[]) => any) | undefined>(
-  callback: T,
-): undefined extends T
-  ? (
-      ...args: Parameters<NonNullable<T>>
-    ) => ReturnType<NonNullable<T>> | undefined
-  : T => {
-  const fnRef = React.useRef<T | undefined>(callback);
-  fnRef.current = callback;
-
-  const memoFn = React.useCallback(
-    (...args: any[]) => fnRef.current?.(...args),
-    [],
-  );
-
-  return memoFn;
-};
+import React from 'react';
+import { useState } from 'react';
+
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+type StableHandler<This, Args extends unknown[], Result> = (
+  this: This,
+  ...args: Args
+) => Result;
+
+function useEvent<This, Args extends unknown[], Result>(
+  fn: StableHandler<This, Args, Result>,
+): StableHandler<This, Args, Result>;
+
+function useEvent<
+  This = unknown,
+  Args extends unknown[] = [],
+  Result = undefined,
+>(
+  fn?: StableHandler<This, Args, Result>,
+): StableHandler<This, Args, Result | undefined>;
+
+function useEvent<This, Args extends unknown[], Result>(
+  callback?: StableHandler<This, Args, Result>,
+) {
+  const fnRef = React.useRef<StableHandler<This, Args, Result>>(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    fnRef.current = callback;
+  }, [callback]);
+
+  const [stableHandler] = useState(() => {
+    return function (this: This, ...args: Args) {
+      return fnRef.current?.apply(this, args);
+    };
+  });
+
+  return stableHandler;
+}
 
 export default useEvent;