Debugging Performance with React Scan

[00:00:00]
>> Matias Gonzalez: We do have a little performance issue here, and to debug this performance issue because it might not be noticeable, especially since we don't really have a lot going on here, let's open our readme. Let's go into this tool called React Scan. So when you're working with React and you're adding like a lot of animations to your website, sometimes what will happen is that you will do things like this, you will make a value react to a mouse movement or update the value like related to some time effect and you might end up like a lot of free renders on your applications without noticing that.

[00:00:49]
So React Scan is a tool that enable us to detect when things are re-render, as you can see every time I click these things get highlighted, so I click and show demo, for example, and it will tell me, hey, this component got re-rendered, and then I can like every time I input something it will tell me which components are getting re-rendered every time I do something.

[00:01:16]
So this is a really, really useful tool to like get a sense of what's happening in our application. So I'm just going to go ahead and add this script tag into my page. So here I mean it should be on the auto layer but just for now let's add it in here and make the linter happy. So if I go back, refresh. I can see that little icon down on the screen indicating to me that it is working and if I toggle this in and then I move my mouse, I can see that my page is actually being re-rendered every time I move the mouse, so again this is a very simple example, so it's working correctly, but let's say that you have made some effect that changes some glow on the button or something like that, and then you have multiple buttons on your page and then you have like your whole page having millions of free renders.

[00:02:27]
And by the time you realize it's too late, like your performance is really bad, and then you need to start like fixing things. So usually having this tool around is useful for detecting like if you're having many re-renders for some reason somewhere. Again, re-renders are not bad per se, but if you're having a ton of re-renders, eventually that's going to hurt our performance.

[00:02:57]
So how can we solve this issue right here? Well, the easiest way to sometimes solve a React performance issue is to escape React. So instead of adding a set state, what I'm going to do is I'm going to just create a reference, so const title ref. So I'm going to create a reference, let's type it, so this will be a heading element, an HTML heading element, and I'm going to initialize it as null.

[00:03:32]
And then I'm going to connect my reference to the element that I want to edit the style for so ref, title ref. So actually delete this. And finally, instead of doing a set state that will cause a re-render every time I move the mouse, what I want to do is do a title ref, the current and this might be null the first time, so I'm going to check that it exists, and then if it exists, let's actually grab the styles and do set property.

[00:04:25]
So set property allows us to directly edit a style on an element and we could animate like the width, the height or whatever but in this case we just want to add to edit one CSS variable directly. We're going to set property distance and I want to set this to distance divided by max distance. And this is failing because it's expecting a string, so let's actually grab this and convert it to a string, so to string.

[00:05:15]
And now this I can just delete this set state here. It will be the exact same result but just without all of the re-renders, so sometimes it's okay to do this just like straight up grab an element and set a style in order to like save a couple of renders in our application.