import * as React from 'react' ; import { Change , getChanges } from './utils' ; function usePrevious < T > ( value ) { const ref = React . useRef < T | undefined > ( ) ; React . useEffect ( ( ) => { ref . current = value ; } , [ value ] ) ; return ref . current ; } export function useLogChanges < T > ( value , logger = console . log ) { const previousValue = usePrevious < T > ( value ) ; const changes = getChanges < T > ( previousValue , value ) ; changes . forEach ( change => { logger ( change ) ; } ) ; } export function useEffectDebugger ( effect , dependencies ) { useLogChanges ( dependencies ) ; React . useEffect ( effect , dependencies ) ; } export function useLayoutEffectDebugger ( effect , dependencies ) { useLogChanges ( dependencies ) ; React . useLayoutEffect ( effect , dependencies ) ; } export function useCallbackDebugger ( callback , dependencies ) { useLogChanges ( dependencies ) ; return React . useCallback ( callback , dependencies ) ; } export function useMemoDebugger ( memoizer , dependencies ) { useLogChanges ( dependencies ) ; return React . useMemo ( memoizer , dependencies ) ; }