Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import { useState, useEffect, useRef } from 'react';
// Let's pretend this <Counter> component is expensive to re-render so ...
// ... we wrap with React.memo, but we're still seeing performance issues :/
// So we add useWhyDidYouUpdate and check our console to see what's going on.
const Counter = React.memo(props => {
useWhyDidYouUpdate('Counter', props);
return <div style={props.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>
<div className="counter">
<Counter count={count} style={counterStyle} />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
<div className="user">
<img src={`http://i.pravatar.cc/80?img=${userId}`} />
<button onClick={() => setUserId(userId + 1)}>Switch User</button>
</div>
</div>
);
}
// Hook
function useWhyDidYouUpdate(name, props) {
// Get a mutable ref object where we can store props ...
// ... for comparison next time this hook runs.
const previousProps = useRef();
useEffect(() => {
if (previousProps.current) {
// Get all keys from previous and current props
const allKeys = Object.keys({ ...previousProps.current, ...props });
// Use this object to keep track of changed props
const changesObj = {};
// Iterate through keys
allKeys.forEach(key => {
// If previous is different from current
if (previousProps.current[key] !== props[key]) {
// Add to changesObj
changesObj[key] = {
from: previousProps.current[key],
to: props[key]
};
}
});
// If changesObj not empty then output to console
if (Object.keys(changesObj).length) {
console.log('[why-did-you-update]', name, changesObj);
}
}
// Finally update previousProps with current props for next hook call
previousProps.current = props;
});
}
@EmrysMyrddin

This comment has been minimized.

Copy link

commented Feb 21, 2019

Perhaps it could be useful to also log a warning when a rerender is treaggered without any props changes ?

@mscolnick

This comment has been minimized.

Copy link

commented Feb 21, 2019

i think this may error: https://gist.github.com/gragland/fe89992181663d5e46d024dec8a8e5e6#file-use-why-did-you-update-js-L72

useEffect requires that memoize params (second arg) has to be the same length. if the number of props change, the length is no longer the same

@brunolemos

This comment has been minimized.

Copy link

commented Feb 22, 2019

Thanks for sharing and for the mention, Gabe!

I was re-reading the code and maybe we should leave the useEffect without any second argument, so it checks every time. By using Object.values it could skip some cases, e.g. when the key change but the value stays the same.

@gragland

This comment has been minimized.

Copy link
Owner Author

commented Feb 22, 2019

@mscolnick @brunolemos Yes, good call. Will remove the second arg as no harm in the effect being called every time.

@gragland

This comment has been minimized.

Copy link
Owner Author

commented Feb 22, 2019

@EmrysMyrddin That makes sense. Here's a quick example of what that might look like: https://gist.github.com/gragland/87a0a7cdc0f276e37e97290f00f57c41#file-use-why-did-you-update2-js-L70

What do you think? Will update the recipe unless anyone sees any problems with this.

@brunolemos

This comment has been minimized.

Copy link

commented Feb 24, 2019

Seems good.

@FengShangWuQi

This comment has been minimized.

Copy link

commented Feb 26, 2019

useWhyDidYouUpdate with new isEqual and pretty log would be great.

https://twitter.com/fengshangwuqi/status/1100279450065727489

@davidpn11

This comment has been minimized.

Copy link

commented Feb 28, 2019

Hey.

I did this small change to check for nested objects at the props. If so, it will use lodash's isEquals to check for equality (I'm lazy haha) .
At the main example, this will avoid logging if you have only changed the avatar and caused a rerender.
I realize this is costy, but since is only for debugging, we don't have to worry since it will not be used in prod =)

Hope you like it!
Link here

@gragland

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2019

@davidpn11 Maybe I'm missing something, but isn't the point that it does log every time there is a re-render? Why skip doing it when the avatar changes? Also, could you explain rationale behind isEqual? Not seeing why a simple previousProps.current[key] !== props[key] isn't enough, since we just want to compare references to see if they changed (and thus caused a re-render).

@davidpn11

This comment has been minimized.

Copy link

commented Mar 1, 2019

@gragland You are right. I was thinking more of a solution to log exactly which props have changed. So it shows you more clearly how your app is behaving. I was not thinking about reference, but more of the data itself.

In conclusion, I was thinking about a different hook. But is nice to see it can be easily derive from your example.

Great work with useHooks by the way! =)

@gragland

This comment has been minimized.

Copy link
Owner Author

commented Mar 1, 2019

@davidpn11: Gotcha, makes sense and seems like a good way to extend this hook. Thanks for the kind words!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.