import { useEffect , useRef } from "react" ; internal export function useLifecycleLogging ( name , props , context ? ) { useEffect ( ( ) => { console . log ( `[useLifecycleLogging]: '${ name }' Component mounted.` ) ; return ( ) => { console . log ( `[useLifecycleLogging]: '${ name }' Component unmounted.` ) ; } ; } , [ ] ) ; const prevProps = useRef ( props ) ; const prevContext = useRef ( context ) ; const firstRun = useRef ( true ) ; useEffect ( ( ) => { if ( firstRun . current ) { firstRun . current = false ; return ; } function getDiff ( prev , current ) { const diff = { } ; for ( const key of Object . keys ( current ) ) { if ( prev [ key ] !== current [ key ] ) { diff [ key ] = { from : prev [ key ] , to : current [ key ] } ; } } return diff ; } const propsDiff = getDiff ( prevProps . current , props ) ; const contextDiff = { from : context === undefined ? context : prevContext . current , to : context } ; if ( Object . keys ( propsDiff ) . length > 0 && prevContext . current !== context ) { console . log ( `[useLifecycleLogging]: '${ name }' Props and context changed: ` , propsDiff , contextDiff ) ; } else if ( Object . keys ( propsDiff ) . length > 0 ) { console . log ( `[useLifecycleLogging]: '${ name }' Props changed: ` , propsDiff ) ; } else if ( prevContext . current !== context ) { console . log ( `[useLifecycleLogging]: '${ name }' Context changed: ` , contextDiff ) ; } else { console . log ( `[useLifecycleLogging]: '${ name }' Component re-rendered.` ) ; } prevProps . current = props ; prevContext . current = context ; } ) ; }