Created
December 17, 2019 15:40
-
-
Save brunolemos/61c188733ead12634e75c19ab7fdc0b6 to your computer and use it in GitHub Desktop.
useWhyDidYouUpdate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useRef } from 'react' | |
export function useWhyDidYouUpdate(name: string, props: Record<string, any>) { | |
const latestProps = useRef(props) | |
useEffect(() => { | |
const allKeys = Object.keys({ ...latestProps.current, ...props }) | |
const changesObj: Record<string, { from: any; to: any }> = {} | |
allKeys.forEach(key => { | |
if (latestProps.current[key] !== props[key]) { | |
changesObj[key] = { from: latestProps.current[key], to: props[key] } | |
} | |
}) | |
if (Object.keys(changesObj).length) { | |
// tslint:disable-next-line no-console | |
console.log('[why-did-you-update]', name, changesObj) | |
} | |
latestProps.current = props | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import flatted from 'flatted' | |
import _ from 'lodash' | |
import { useEffect, useRef } from 'react' | |
export function useWhyDidYouUpdate( | |
name: string, | |
props: Record<string, any>, | |
{ | |
onChangeFound, | |
onNoChangeFound, | |
}: { | |
onChangeFound?: (data: { | |
changesObj: Record< | |
string, | |
{ from: any; to: any; isDeepEqual: boolean; changedKeys?: string[] } | |
> | |
}) => void | |
onNoChangeFound?: () => void | |
} = {}, | |
) { | |
const latestProps = useRef(props) | |
useEffect(() => { | |
if (!__DEV__) return | |
const allKeys = Object.keys({ ...latestProps.current, ...props }) | |
const changesObj: Record< | |
string, | |
{ from: any; to: any; isDeepEqual: boolean; changedKeys?: string[] } | |
> = {} | |
allKeys.forEach(key => { | |
if (latestProps.current[key] !== props[key]) { | |
changesObj[key] = { | |
from: latestProps.current[key], | |
to: props[key], | |
changedKeys: | |
props[key] && typeof props[key] === 'object' | |
? (Object.keys(latestProps.current[key]) | |
.map(k => | |
latestProps.current[key][k] === props[key][k] ? '' : k, | |
) | |
.filter(Boolean) as string[]) | |
: undefined, | |
isDeepEqual: _.isEqual(latestProps.current[key], props[key]), | |
} | |
} | |
}) | |
if (Object.keys(changesObj).length) { | |
if (onChangeFound) { | |
onChangeFound({ changesObj }) | |
} else { | |
// tslint:disable-next-line no-console | |
console.log('[why-did-you-update]', name, { | |
changes: flatted.parse(flatted.stringify(changesObj)), | |
props: { from: latestProps.current, to: props }, | |
}) | |
} | |
} else if (onNoChangeFound) { | |
onNoChangeFound() | |
} | |
latestProps.current = props | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment