useWhyDidYouUpdate()

The useWhyDidYouUpdate() hook is a dev-tool utility that helps you understand why a component re-rendered by comparing previous and current props.

Import

typescript

import { useWhyDidYouUpdate } from 'the-react-hooks';

Usage

Note: Open your browser console (F12) to see the logs generated by this demo.

Watched Component

count: 0

userId: 1

(Check console to see the logs)

Component.tsx

import { useState } from 'react';
import { useWhyDidYouUpdate } from 'the-react-hooks';

const CounterInfo = (props) => {
  useWhyDidYouUpdate('CounterInfo', props);

  return (
    <div>
      <p>Count value: {props.count}</p>
      <p>User ID: {props.userId}</p>
    </div>
  );
};

export const Component = () => {
  const [count, setCount] = useState(0);
  const [userId, setUserId] = useState(1);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Increment Count
      </button>
      
      <button onClick={() => setUserId(u => u + 1)}>
        Change User ID
      </button>

      <hr />
      <CounterInfo count={count} userId={userId} />
    </div>
  );
}

API

Arguments

name – string A label to identify the component in the console logs.
props – Record<string, any> The props object (pass props directly).

PrevioususeUpdateEffect NextuseWindowSize