use-memoized-fn

1import { useMemo, useRef } from 'react'
2 
3type noop = (this: any, ...args: any[]) => any
4 
5type PickFunction<T extends noop> = (
6  this: ThisParameterType<T>,
7  ...args: Parameters<T>
8) => ReturnType<T>
9 
10export function useMemoizedFn<T extends noop>(fn: T) {
11  const fnRef = useRef<T>(fn)
12 
13  // why not write `fnRef.current = fn`?
14  // https://github.com/alibaba/hooks/issues/728
15  fnRef.current = useMemo<T>(() => fn, [fn])
16 
17  const memoizedFn = useRef<PickFunction<T>>(undefined)
18 
19  if (!memoizedFn.current) {
20    memoizedFn.current = function (this, ...args) {
21      return fnRef.current.apply(this, args)
22    }
23  }
24 
25  return memoizedFn.current
26}