import isEqual from 'fast-deep-equal/react' ; import { DependencyList , useEffect , useRef } from 'react' ; import warning from 'tiny-warning' ; internal export const useEffectWithWarning = process . env . NODE_ENV === 'production' ? useEffect : ( effect , deps ) => { const firstUpdate = useRef ( true ) ; const ref = useRef < DependencyList > ( ) ; const unnecessaryChange = useRef ( 0 ) ; useEffect ( ( ) => { if ( firstUpdate . current ) { firstUpdate . current = false ; ref . current = deps ; return ; } if ( ! isEqual ( deps , ref . current ) ) { unnecessaryChange . current = 0 ; ref . current = deps ; return ; } unnecessaryChange . current += 1 ; } ) ; const wrappedEffect = ( ) => { if ( unnecessaryChange . current > 0 ) { throw new Error ( `SERIOUS ${ unnecessaryChange . current }` ) ; } warning ( unnecessaryChange . current === 0 , `The dependencies passed into your useEffect are identical, but an update has been triggered ${ unnecessaryChange . current } time(s). Please consider wrapping the values with \`useMemo\` or \`useCallback\` to memoize your dependencies and prevent unnecessary re-renders.` ) ; return effect ( ) ; } ; useEffect ( wrappedEffect , deps ) ; } ;