This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React, v7 course:
The "StrictMode" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through importing and applying StrictMode, which provides additional warnings when using legacy or soon to be deprecated code.

Get Unlimited Access Now

Transcript from the "StrictMode" Lesson

[00:00:00]
>> So StrictMode, they introduced this like with React 16 or 17 or something like that might have been earlier. I don't remember. But the idea here is, if you put your app into a StrictMode, it will add additional checks that basically help you future-proof your application. So they'll put things that don't allow you to do things that would not be compatible with, like the future React batching mode and the future suspense rendering and things like that.

[00:00:34] So it makes it kind of a little bit more stringent in terms of the requirements of how you're able to accomplish things. But the end result is your app is more future-proof, it's gonna be more compatible with the next release of React. That makes sense? So it's not gonna be a good fit for everyone's application.

[00:00:51] So the way we can do it now, just so you can see it, nothing we're doing today will cause us to go off or anything like that. But if we go to app.js, all you have to do is say import StrictMode from React. And then you just wrap your entire app in StrictMode.

[00:01:13] The first question someone's gonna ask me is, do I wanna ship StrictMode to production? The answer is if you build vehicles production StrictMode does literally nothing. So it strips out all of the code, it's like, well, this is still there. Yeah, you'll waste four bytes, maybe. That's probably more than that.

[00:01:35] Eight bytes. If that, so it's totally fine. You can ship this StrictMode to production, it just does nothing in production. It's always changing what it does. So with React 18, they're gonna put additional checks. One of the things that they're talking about doing is double rendering your app.

[00:01:56] So it'll render your app twice and see if it's doing anything inconsistent. Because in theory your app should be the same every single time, right? I tried it, it's fairly annoying because it makes two API requests which frequently you don't wanna do. But it's not settled, they haven't decided they're gonna ship the, yeah, questions?

[00:02:18]
>> Just in dev mode though, right?
>> Yes, correct.
>> So it's like doing quick snapshot tests basically over and over and over again?
>> Correct.
>> Wow.
>> But it's doing stuff like that to kind of help you make sure that you're writing your app in such a way that's gonna be compatible with everything that's coming in the future.

[00:02:39] The nice thing about StrictMode being a component is let's say you have like a legacy part of your app and a new part of your app,. You can just wrap the new part in StrictMode and you can leave the legacy part out of it, all right? So, that's why they made it a component so you can actually just check specific parts of your application.

[00:03:01]
>> Interesting I noticed I forgot to import StrictMode, and it was smart enough to do it automatically for me. We're in the future?
>> We live in the future, thank you, VS code, and all the PMs that used to work on it. That's a joke, that was me.

[00:03:20] I did that.
>> [LAUGH]