A simple React hook to run a shallow comparison over all key-value pairs in an object against their previous values. Useful for determining which of your props are triggering unexpected re-renders.

use_trace_update.ts

import React from 'react';

/* eslint-disable no-console */
export const useTraceUpdate = <P>(props: P) => {
  const prev = React.useRef(props);
  React.useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
};
/* eslint-enable no-console */