React Dev Tools

[00:00:00]
>> So let's go back to our course website here for a little bit. We're down here on dev tools. So a couple of notes here. Right now we're doing node, we're doing, react development and development mode. Which means when we see errors down here in our console they're like really nice errors, right?

[00:00:26]
They have hey, you're doing this maybe think about doing this here's a link to something like that. The development package for react is four times bigger than the normal production package. So please do not ship the development mode react to production, it's slower and it's bigger. Famously, Slack did this forever.

[00:00:48]
Like your when you were using slack, their electron app was shipping you the development package for React. It's a desktop application. It wasn't the end of the world but it did make slack slower. So the way that you change that, which Vite handles for you automatically. So if you're using Vite or you're using Parcel, don't even think twice about it.

[00:01:08]
But if you're doing something like Webpack, you do have to care what is the Node end set to. So you can set environmental variables in Node. If Node end is equal to development, you are shipping the development version of React. If it's equal to production, or I think anything else you will get, like the production small version of it.

[00:01:30]
When you have an error in the production version, it basically says like, hey, there's an error, go copy and paste this into Google, and it'll take you to what the error is, but it doesn't give you any useful error messages. So that's number one. React has something called strict mode which basically it helps you be ready for react changes that are coming.

[00:01:53]
So basically like if they had some big thing that was coming in React 19, which they don't at the moment, as far as I know, they'll put that into strict mode first to let you know. It's like, hey, you're doing this, this works now, it will not work later.

[00:02:06]
We are not going to do that today. I used to do it during this course. But they started doing a thing where they render your app twice, to make sure that you don't have side effects that are not happening consistently. And I think it's dumb, and I don't like it.

[00:02:19]
So therefore I'm not doing it. I don't get it, like they run all of your API requests twice. They do a bunch of stuff like that. It didn't make any sense to me, so right now, I don't use strict mode. Whenever they do away with that nonsense then I will put strict mode back in, but that's up to you, you can definitely right now all you have to do is come into your app.js, and just wrap your app in strict mode like this.

[00:02:47]
It comes from React. That's it. That's all you need to do to put it in strict mode. It doesn't slow down your app or anything like that. It doesn't ship anything additional to production. It only does anything in development mode, but that's what strict mode does. To prove my point here, if I go to network and I look at XHR, notice that it calls this twice.

[00:03:16]
That annoys the hell out of me, which is why I don't do it. Specifically that is the only reason why I don't like it. Everything else is great about strict mode, but I don't like that they do it twice. And I'm not the only person that doesn't like it.

[00:03:28]
That's number two that I have here. Last one is we're going to talk about dev tools. React has its own dev tools. And let's go install that. I don't think I have that on Chrome at the moment. So let's go do it. Just search for React dev tools.

[00:03:44]
And if you're using Chrome, search chrome. Or if you're using Firefox, search that. It's this one. And you just click Add to Chrome. Okay, so now I come back over here. Let's just try opening a new tab. Okay, it's good so far. Here we go. So you should see showing up in here the components and profiler.

[00:04:28]
This is basically like a little explorer for you to use for your dev tools, right? So I have my app component, which is like everything. I have the search components, the search prams, the results, which you can see are over here, pet components, and then I can click on them.

[00:04:44]
I can see the state, something kind of cool is I can like modify it so I can say Seattle, WA. If I hit Enter, notice that it modifies that over there so you can actually mess with the state. If I click here into results I can see the props that are being passed in, right, you can't mess with props I guess it's not something I've said out loud but I think it makes sense.

[00:05:10]
If I go over here into results, and I'm getting these props, props are read only, right? They come in as properties. If I modify the props, it doesn't modify what the parent is passing in. So props are read only, state is mutable that are like you know, use state and hooks and things like that.

[00:05:28]
So, by the same token here, I cannot mess with these here, right? Interesting, It wants me to put it in strict mode. Well, no, I don't want to can't make me, it'll tell you where it came from, which is nice like the source, right? That's cool. It can tell you like the render path here which is also good.

[00:05:54]
And then there's a profiler here as well. So, if I do that and then refresh the page and then stop here, it's going to give me like a burndown of like, what took so long. Why it took so long, timeline, ranked, it gives you a bunch of stuff here.

[00:06:13]
Like if you really want to get into the depth of the performance of your application. This is it. This is available in Chromium, so this works in Edge, Brave, Vivaldi, any of those, then also works on Firefox. They don't publish Safari anymore, they used to but they don't anymore.

[00:06:35]
So, please use the dev tools, they're awesome. It's an essential part of being a reacted all by using these extensively.