useWhyDidYouUpdate makes it easy to see which prop changes are causing a component to re-render. If a function is particularly expensive to run and you know it renders the same results given the same props you can use the React.memo higher order component.


import { useWhyDidYouUpdate } from '@dwarvesf/react-hooks'

Return value#

The useWhyDidYouUpdate hook returns a function that receives the element and assign the value to the given React refs.


function Example() {
const Counter = React.memo((props) => {
useWhyDidYouUpdate('Counter', props)
return <div style={}>{props.count}</div>
function App() {
const [count, setCount] = useState(0)
const [userId, setUserId] = useState(0)
// Our console output tells use that the style prop for <Counter> ...
// ... changes on every render, even when we only change userId state by ...
// ... clicking the "switch user" button. Oh of course! That's because the
// ... counterStyle object is being re-created on every render.
// Thanks to our hook we figured this out and realized we should probably ...
// ... move this object outside of the component body.
const counterStyle = {
fontSize: '3rem',
color: 'red',
return (
<div className="counter">
<Counter count={count} style={counterStyle} />
<button onClick={() => setCount(count + 1)}>Increment</button>
<div className="user">
<img src={`${userId}`} />
<button onClick={() => setUserId(userId + 1)}>Switch User</button>
return <App />


The useWhyDidYouUpdate hook accepts following params:

propsRecord<string, any>_
Edit this page

Made with ❤️ by Dwarves Foundation