[Hook] useWhyDidUpdate

useWhyDidUpdate.ts

const useWhyDidYouUpdate = (name: string, props: any) => {
  const previousProps = useRef<any>({});

  useEffect(() => {
    if (previousProps.current) {
      const allKeys = Object.keys({
        ...(previousProps.current || {}),
        ...props
      });
      const changesObj = {} as any;
      allKeys.forEach(key => {
        if (previousProps.current[key] !== props[key]) {
          changesObj[key] = {
            from: (previousProps.current || {})[key],
            to: props[key]
          };
        }
      });
      if (Object.keys(changesObj).length) {
        console.groupCollapsed(`${name} updated:`);
        for (const key in changesObj) {
          // eslint-disable-next-line no-useless-concat
          console.log(`%c${key}`, "color:red;", "changed", changesObj[key]);
        }
        console.groupEnd();
      }
    }
    previousProps.current = props;
  });
};