useWhyDidYouUpdate

const Component = () => {
  const [count, setCount] = React.useState(0);
 
  useWhyDidYouUpdate('Component', { count });
 
  return (
    <>
      <p>Have a look at the console after clicking the button</p>
      <code>
        <pre>State: {JSON.stringify({ count }, null, 2)}</pre>
      </code>
      <button onClick={() => setCount((prev) => prev + 1)} type='button'>
        Click {count}
      </button>
    </>
  );
};

const Component = (props: any) => {
  useWhyDidYouUpdate('Component', props);
 
  return (
    <>
      <p>Have a look at the console after clicking the button</p>
    </>
  );
};
 
export const UpdateProps: Story = () => {
  const [count, setCount] = React.useState(0);
 
  return (
    <>
      <WhyDidYouUpdate count={count} />
      <code>
        <pre>Props: {JSON.stringify({ count }, null, 2)}</pre>
      </code>
      <button onClick={() => setCount((prev) => prev + 1)} type='button'>
        Click {count}
      </button>
    </>
  );
};