24 lines
881 B
TypeScript
24 lines
881 B
TypeScript
import {useCallback, useInsertionEffect, useRef} from 'react'
|
|
|
|
// This should be used sparingly. It erases reactivity, i.e. when the inputs
|
|
// change, the function itself will remain the same. This means that if you
|
|
// use this at a higher level of your tree, and then some state you read in it
|
|
// changes, there is no mechanism for anything below in the tree to "react"
|
|
// to this change (e.g. by knowing to call your function again).
|
|
//
|
|
// Also, you should avoid calling the returned function during rendering
|
|
// since the values captured by it are going to lag behind.
|
|
export function useNonReactiveCallback<T extends Function>(fn: T): T {
|
|
const ref = useRef(fn)
|
|
useInsertionEffect(() => {
|
|
ref.current = fn
|
|
}, [fn])
|
|
return useCallback(
|
|
(...args: any) => {
|
|
const latestFn = ref.current
|
|
return latestFn(...args)
|
|
},
|
|
[ref],
|
|
) as unknown as T
|
|
}
|