useWhyDidYouUpdate

作用

帮助开发者排查是那个属性改变导致了组件的 rerender。

原理

通过 useEffect 拿到上一次 props 和当前的 props 进行比较。得到值改变的 changedProps

源码

import { useEffect, useRef } from 'react'

export type IProps = Record<string, any>

export default function useWhyDidYouUpdate(componentName: string, props: IProps) {
  const prevProps = useRef<IProps>({})

  useEffect(() => {
    if (prevProps.current) {
      const allKeys = Object.keys({ ...prevProps.current, ...props })
      const changedProps: IProps = {}

      allKeys.forEach((key) => {
        if (!Object.is(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
  })
}