Add the why-did-you-render Package to Catch Unnecessary Updates in React
Sometimes it can be difficult to understand why your components are rerendering. The why-did-you-update package will show what props and/or state updated that cause the re-render. Let’s install this package and figure out why our component is unnecessarily updating.
Instructor: [0:00] Here's the Products page within my app. You can see that there is a State Change button here, that changes really quickly and doesn't do any additional console logs when it's being clicked on. It also displays a bunch of products, that show some metadata and price. There are a bunch of these, over 100, close to 200 of these products here.
[0:21] Inside of the code for this page, is the Products component. It's got a couple of useStates, a couple useEffects, that kind of stuff going on in here. Notice, down here, we have our ProductCard, which is this, here. This is a ProductCard, this is a ProductCard, this is another one. We map over a products list to pump these out.
[0:44] If we F12 into this ProductCard component, we'll see that it's being wrapped with React.memo(), which is great, because it is saving us from a lot of rerenders. Notice, it has a console.log here in the body. When we click on the State Change, we don't get any console.logs.
[1:02] If we go over to products and add one additional prop, let's just add a style property of an object that's background of red. We don't actually reference this inside of the props, here. However, by adding that object, now when we click on State Change, notice that we're seeing the number of renders happening here.
[1:26] Why is this? Looking back at our props again, why is it that when we add a style prop to our ProductCard, when it already had all of these other props going down into it, why is it that we add this style prop that we don't even reference inside of this React.memo() component here? Why does that force a re-render when state is changing inside of the Products' parent component? Again, it has nothing to do with what's going on with this.
[1:54] Let's go ahead and install "Why Did You Render" into our application and set it up within our app. I'll install this here using yarn add --Dev. Then we'll restart our server. Some are higher up in your component directory. Go ahead and create a file.
[2:12] I'm going to do, just inside of these pages here for simplicity, a file titled "Why Did You Render", just WDYR.JS. Then, as we can see from the documentation, we just need to import React and do a little bit of code inside of this file.
[2:31] We just want this to run in development mode only. It's doing an if check here. It's going to require that package here, and then run that function Why Did You Render() and tracking all pure components.
[2:47] Back inside of our products file, we're going to import this in just as it says here. I'll do it at the top of the page. Perfect. Now if we head back over to our app and see what it looks like, you can see that now you're going to see a bunch of console.logs coming from that package.
[3:07] First of all, we have an unknown here. Let's go and change one line of code instead of our ProductCard. Instead of having React.memo() here, in order for it to display the correct name of our components, I'm going to move it down to the export. React.memo(), and then ProductCard.
[3:29] Now you'll notice that it does give us the right name for our component when we rerender, so the ProductCard is rerendering. Our handy package is telling us why. This style prop is changing, which is causing a rerender.
[3:45] This is because React.memo() does a shallow compared to a components props. Because we're passing in object as a prop to our ProductCard, with each rerender of the parent Product component with the changing of text here, this changing of state, it's going to create a new object instance with the same value of style.
[4:08] However, in JavaScript, these two objects are going to be false, which is going to cause a new rerender. That might have been obvious to you when I added that style prop to our components of why the React.memo() component was rerendering.
[4:23] As your application grows and you're passing the props, and you have a lot of children components, it might be hard to figure out where in the tree is causing a rerender to your components, which is why this package comes in really handy.
[4:35] It is worth mentioning that inside of this package there is an options that you can pass to it which can customize how and what components get tracked.
[4:45] If you remember inside of the code that we pasted in, all that I did was the default track all pure components, which included ProductCard. There's additional things that you can add to your codebase here to make it more customized to your experience.