react-reuse-hooks/src/hooks/useWhyDidYouUpdate.js

A collection of 30+ production-ready reusable React hooks for web apps, covering state, effects, media, forms, and utilities.

import { useEffect, useRef } from "react";

export function useWhyDidYouUpdate(name, props) {
  const previousProps = useRef();

  useEffect(() => {
    if (previousProps.current) {
      const changedProps = Object.entries(props).reduce(
        (diff, [key, value]) => {
          if (previousProps.current[key] !== value) {
            diff[key] = {
              from: previousProps.current[key],
              to: value,
            };
          }
          return diff;
        },
        {}
      );

      if (Object.keys(changedProps).length > 0) {
        console.log("[why-did-you-update]", name, changedProps);
      }
    }
    previousProps.current = props;
  });
}