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, v6 course:
The "Strict Mode" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates setting React into strict mode which will throw stronger errors. Strict mode will throw errors on deprecated code and not allow the use of old APIs.

Get Unlimited Access Now

Transcript from the "Strict Mode" Lesson

[00:00:00]
>> So Strict Mode is a mode that you can put React into that it is less chill. [LAUGH] It's basically gonna throw stronger errors at you, and it's gonna enforce more opinions on you. And this comes directly from the React core team. So it's generally a good idea.

[00:00:19] Specifically, let's see react unsafe. So there's a bunch of methods here called like unsafe component will mount. And there's other kinds of things that they're deprecated, but they don't want you to use them. And what Strict Mode basically doesn't allow you to use then. Basically, what's happening is, it's kind of a way for the React team to slowly phase out old API's that don't work as well or are incompatible with their future model.

[00:00:56] So they cannot use, all right, in React 17 you can use these unsafe ones, and then we're gonna remove them in React 18, right? That's kind of that sort of methodology of phasing out API's. What strict mode does is it just says we're not going to allow you to introduce any of these things.

[00:01:12] We're only going to let you work on current safe APIs. I think there's some other things in there as well, but that's kind of the gist of it. So what I want you to do is I want you to go into your application really quick. I want you to go to app.js, and just surrounding your app here, I want you to put Strict Mode.

[00:01:40] Strict Mode. And surround that with, so it's kind of strange, right? Because Strict Mode in and of itself has zero functionality. All it does is it enforces a certain way of writing components. But you would call this a higher order component in React in the sense that it itself doesn't do anything, but it offers functionality to its children components.

[00:02:08] So wrap app in Strict Mode just like that, and then at the top, you're gonna have to import Strict Mode from React. The first question that people always ask me about this is, does this make my bundle size bigger? And the answer is no, it does not. It gets stripped out in production builds.

[00:02:28] Next question you might ask me is, why did I wrap app and why did I not put it here? And the answer is you absolutely can. And I have no opinion, really, of how you do that. I'd have to put a comma there.
>> You do need the div as well.

[00:02:49]
>> This div?
>> Mm-hm.
>> Yeah, you do need the div. We're gonna talk about fragments later. So you can do this either way. But I've seen it done both ways. I'm just gonna put it here because that's what my notes have, but feel free to do it either way.

[00:03:10] So that's Strict Mode, it's basically just additional free help from the React team. I always accept free help. I love automated help, it's my favorite kinda help.