Function useWhyDidYouUpdateById

cli/src/hooks/use-why-did-you-update.ts:111–177

(
  componentName: string,
  id: string,
  props: T,
  options: {
    logLevel?: 'debug' | 'info' | 'warn' | 'error'
    enabled?: boolean
  } = {},
)

 * }
 */
export function useWhyDidYouUpdateById<T extends Record<string, any>>(
  componentName: string,
  id: string,
  props: T,
  options: {
    logLevel?: 'debug' | 'info' | 'warn' | 'error'
    enabled?: boolean
  } = {},
): void {
  const env = getCliEnv()
  const { logLevel = 'info', enabled = env.NODE_ENV === 'development' } =
    options

  const previousProps = useRef<T | null>(null)
  const renderCountById = useRef<Record<string, number>>({})

  useEffect(() => {
    if (!enabled) return

    renderCountById.current[id] = (renderCountById.current[id] || 0) + 1
    const renderCount = renderCountById.current[id]

    if (previousProps.current) {
      const propKeys = Object.keys(props) as (keyof T)[]
      const changedProps = propKeys.filter(
        (key) => previousProps.current![key] !== props[key],
      )

      const logData = {
        id,
        renderCount,
        changedProps: changedProps.map((key) => String(key)),
      }

      if (changedProps.length > 0) {
        logger[logLevel](
          {
            ...logData,
            propChanges: changedProps.reduce(
              (acc, key) => {
                acc[String(key)] = {
                  previous: previousProps.current![key],
                  current: props[key],
                }
                return acc
              },
              {} as Record<string, { previous: any; current: any }>,
            ),
          },
          `${componentName} render #${renderCount} [${id}]: ${changedProps.length} ${changedProps.length === 1 ? 'prop' : 'props'} changed`,
        )
      } else {
        logger[logLevel](
          logData,
          `${componentName} render #${renderCount} [${id}]: No props changed`,
        )
      }
    } else {