Make Your React Site 100% Faster With This Amazing FREE Tool

Key Takeaways

If you've ever tried to debug performance issues in React, you know how difficult it can be, which is why I'm really excited for a new library called React Scan, which not only makes it really easy to find where these performance issues are, but it also helps you figure out exactly what is causing the performance issue, so you know what to change inside your code. In this video, I'm going to quickly show you exactly what this library do and how easy it is to set up. Welcome back to Web Dev Simplified. My name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner. And I'm on the home page right here for React Scan and all you need to do to add React Scan to whatever project you want is just to copy this script tag and paste it to the very top of whatever HTML file or wherever you're loading your scripts. For example, there's an example here on how you can do it with Next.js, how to do it with pages, how to do it with V, how to do it with Remix, or just add this script tag to literally any application you want. And as soon as you do that, you're going to have React Scan on your application. And we can show you with this demo how it works. You can see as I start to modify things on my page, I get a nice purple outline around the thing that's changing, as well as this telling me how many times that thing is particularly re-rendering. This is a great way to just be able to look at your application and say, "Okay, what is re-rendering a lot that maybe shouldn't be?" Sometimes if you're having too many re-renders, that can be a cause of performance issues. And this at least at a high level gives you an idea, "Okay, this thing is maybe rendering more times than it needs to." And then if you want, you can dial in even further. So, as you can see here, as I start to modify things, a lot of things are changing that maybe shouldn't change. So, let's go ahead and just do a really quick example. We're going to click on this input element right here and we're going to open up this box over here. So, you can see I clicked on this button down here. This allows me to select an element. I'll select this input box and it gives me a bunch of information on that element. Now, as I start to modify my element, you'll notice I get a section right here for what is being changed. I'll even move my camera out of the way for you so it's not blocking anything, but you can see right here, we had nine re-renders and the value was changed 10 times and the on add function was changed 10 times. Now, this makes sense since obviously the value is changing every single time I type something inside this input, but this on add function probably shouldn't change every single time I type in this input. And that's something that either the React compiler, which is coming soon, can fix or something that we can memoize ourselves. Also, a really nice thing is I can view the re-render history. I can scrub through this to see, okay, you know, exactly what was my value at this particular re-render number two, for example, or re-render number 19. And so, I can scan through exactly what's happening. I see all the up-to-date props here, as well as all the information related to anything in the context. And I can even go through my actual React tree here to be able to say, okay, I want this particular element or this particular element. Now, let's go ahead and dive a little further. We're going to click on one of these to-do boxes right here, and we're going to see why this is re-rendering. So, I can come in here, just close this, and you'll notice that this particular element is re-rendering because its on delete prop is changing. Most likely, this is because I need to memoize this function cuz it's probably not actually changing. It's just being re-instantiated because of the way React does things. So, I would either need to wrap this in a use callback, or again, the React compiler would fix this for me. Now, in our particular use case, we're not actually having any performance issues. One really nice thing about this application, as you can see here, if I just close out of this section, at the very top, it's going to tell me how quickly this page is re-rendering. In our case, we can see our frames per second is 145, 144. And you can see, no matter what I'm doing, I'm typing a bunch of stuff really quickly, and it's never actually changing that particular value from that 144. So, the really nice thing with this tool is you can go ahead, use your application, and as soon as you notice a dip in your performance, you'll see it right here, and it'll allow you to be like, okay, I now have a dip in my performance. What is actually causing that particular issue? You can then dive in further and see exactly what's happening, and it'll even give you times for the rendering and so on. Now, this is just a brief overview of kind of what this tool looks like. So, I want to dive really quickly into the actual source code, the GitHub here, just to kind of tell you the overall view for this. You can install it as a package manager, which has some uses. For example, you can set up here inside of your script to actually run your development environment, and then run React scan on top of it, so you can run development without this, or you can run it with that by setting up two separate scripts, or you can just include the script tag directly in your application, and then it'll run every single time you run your application. It's really entirely up to you. Also, they're working on a browser extension and getting it it confirmed with Google Chrome and all the other browsers. So, that's another option you can use for this particular tool. Now, I kind of want to show you what this looks like in a real world application. So, I'm just going to bring over the code here real quick. You can see that inside of the HTML file that I'm using, this is a V application. I just pasted that script tag right at the very top. That's literally the only thing I changed inside this application. Once I did that, you can see over here, I now have this React Scan showing up on my screen. If you're curious about where this project came from, it's actually the final project for my React Simplified course. And if you want to learn how to build this entirely from scratch, I highly recommend checking out that course cuz it's not only going to teach you the absolute basics of React, but it's also going to go into advanced concepts related to React all the way to the point where you can build this project which contains a full job listing board with payments, user authentication, and so much more. If you're interested in checking that out, link it down in the description for you. And now that you can see it's running, you can see no matter what I'm clicking on, essentially I have that steady performance across my entire application. Now, you'll notice that if I go to job listing here, I can search for a particular location. And you can see a lot of different things are re-rendering. Now again, once you have a lot of re-renders, that doesn't necessarily mean it's bad because React is essentially designed around doing lots of re-renders, but it can help you notice certain problems. Now here, I can say, "You know what? Why is this title re-rendering when I'm changing just my location?" So, what I can do is make this just a little bit smaller. There we go. So, I can type inside of here. And you notice as I type inside of here, the thing that's changing is this unnamed context. Essentially, my context that's wrapping all of this is changing. And that's happening because I'm essentially using React Hook Form and all of the React Hook Form library to hook up this form. So, when you change one value, it's essentially re-rendering the entire form because it's all wrapped inside of one context. Now, React is smart enough to make sure it doesn't actually change a lot of stuff in the DOM. It's doing a lot of virtual DOM diffing, so it's super performant. But again, because this is all wrapped inside of one context, everything in the context is updating when the context is changing. And again, React Compiler can help with that or doing your own manual minimization. But the important thing to note about libraries like React Scan is it doesn't mean that just because something's re-rendering, it's bad. This is just a tool to help you say, "Okay, you know what? I'm noticing performance issues in my application. I'm going to add React Scan to my application, and then I'm going to just play with it and see exactly where my performance dips." As soon as you notice those performance dips, then you can dive in with React Scan and be like, "Oh, you know what? It's re-rendering all this information when it probably shouldn't be, and that's maybe where my performance problems are." Now, let's go ahead and figure out why that's re-rendering. You can come in here. "Oh, it's re-rendering cuz my value and my context are changing." That's kind of the process you go through with a tool like this. It's not necessarily something you install right away when you first start working on your application. I mean, there's no problem with doing that, but really this is a tool that you only need once you start noticing performance problems. Then you can come in and use this to debug what those performance problems are. It has the really nice tool here to kind of tell you exactly what's changing, which makes it really easy for you to figure out where that problem is, and then figure out how you can actually fix that. Now, before I finish this video, I actually just got an email from the developer of React Scan letting me know of a brand new feature inside the library, which is notifications for anytime that you have an FPS drop. As you can see here, it notifies me of these problems, and it also tells me exactly why they happen. And to give you a quick example, I have some code over here that just renders out an element to my screen based on the number I have here. So, if I type in five, it's going to render five, 55, 55, and so on. As you can see, it tells me exactly the history of everything that goes on and how long each update took based on what I'm doing. And the really great thing is if I have significant slowdowns and so on, they are going to show up in here, and it's going to give me specific details on exactly why that's happening. For example, here I can see that the updating the DOM is what took really long, and if I want, I even get an AI prompt that I can use to fix, explain, or just try to figure out what's going on with my particular application. So, the really nice thing is you can just have this going on in the background, not even caring about it, and you can see down here, "Oh, I have two notifications. I wonder what those issues are." And I can click around to the exact things that are causing problems to see what they are. Now, if you're noticing any performance issues, I highly recommend you download this tool. And if you want to learn more about how the React Compiler can really help speed up your applications, I'm going to link a video right over here talking all about the React Compiler. With that said, thank you very much for watching and have a good day.