import { useEffect , useRef } from 'react' ; export type IProps = { [ key ] : any ; } ; export default function useWhyDidYouUpdate ( componentName , props ) { const prevProps = useRef < IProps > ( { } ) ; useEffect ( ( ) => { if ( prevProps . current ) { const allKeys = Object . keys ( { ... prevProps . current , ... props } ) ; const changedProps = { } ; allKeys . forEach ( key => { if ( prevProps . current ! [ key ] !== props [ key ] ) { changedProps [ key ] = { from : prevProps . current ! [ key ] , to : props [ key ] } ; } } ) ; if ( Object . keys ( changedProps ) . length ) { console . log ( '[why-did-you-update]' , componentName , changedProps ) ; } } prevProps . current = props ; } ) ; }