31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import * as React from 'react';
|
|
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
|
/**
|
|
* @internal
|
|
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
|
|
*
|
|
* Modified `useCallback` that can be used when dependencies change too frequently. Can occur when
|
|
* e.g. user props are dependencies which could change on every render
|
|
* e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently
|
|
*
|
|
* This should not be used often, but can be a useful re-render optimization since the callback is a ref and
|
|
* will not be invalidated between re-renders
|
|
*
|
|
* @param fn - The callback function that will be used
|
|
*/ export const useEventCallback = (fn)=>{
|
|
const callbackRef = React.useRef(()=>{
|
|
throw new Error('Cannot call an event handler while rendering');
|
|
});
|
|
useIsomorphicLayoutEffect(()=>{
|
|
callbackRef.current = fn;
|
|
}, [
|
|
fn
|
|
]);
|
|
return React.useCallback((...args)=>{
|
|
const callback = callbackRef.current;
|
|
return callback(...args);
|
|
}, [
|
|
callbackRef
|
|
]);
|
|
};
|