Complete Intro to React, v5 Complete Intro to React, v5

Environment Variables & Strict Mode

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

Brian explains how Parcel compiles the development server using the NODE_ENV environment variable, then automatically flips the switch when the application is built for production, erasing unnecessary debugging tools for a more performant application. React strict mode is also introduced as a tool that throws errors when using React features that are soon to be deprecated.

Get Unlimited Access Now

Transcript from the "Environment Variables & Strict Mode" Lesson

[00:00:00]
>> Brian: There's a couple things that I wanna call out here. One of the big things is when you're compiling your code, it's really important that you set the NODE_ENV.. Now, the good news for you is if you're using Parcel, Parcel just takes care of this. So when you're in development mode, it'll keep it in NODE_ENV=development.

[00:00:16] And then when you do a Parcel build index.html, it'll set that to production. With Web pack and browser file, you need to be a little more explicit.
>> Brian: So the reason why you do this is when you're in development mode, it'll give you more descriptive errors. It'll kind of help you along the way.

[00:00:38] It'll prevent you from doing bad things. And then, when you put it in production mode, it cuts out as much code as you want or as it can. So it drops all of the debugging code, which makes it smaller and faster. But you don't get the useful error messages.

[00:00:50] You don't get source maps. You don't get a bunch of the stuff that helps you write code. So it's just key to make sure that both of those things are set in the appropriate environments.
>> Brian: Slack, famously messed this up, that they were shipping the development environment for a long time.

[00:01:07] So it's worth keeping an eye on cuz it's four times larger and 40 times slower if you use the development environment.
>> Brian: Okay, strict mode, there's a thing that you can wrap entire application in React.Strict. And what this will do for you is it'll help you future proof your application.

[00:01:31] So React has some things that they're trying to deprecate. And if you do React.Strict, it won't allow you to use them anymore. Whereas if you don't have React in strict mode, it'll let you use these things that they're going to shortly deprecate. And the cool thing is it's a component, so you can make part of your application in strict mode and part of it not in strict mode.

[00:01:51] So if you have a new part of your application, you can put that in strict mode. And if you have an old part that does use the old part of React, you can still have that not in strict mode. So just to show you how to do that.

[00:02:02] In fact, we can just do it really quick and leave it in wrap. Go to wrap.JS, and just here you can say React.StrictMode. I guess I got that wrong in my notes. So yeah, React.StrictMode like that.
>> Brian: React.StrictMode doesn't render anything, it doesn't add any page weight or anything like that, so this is totally fine to ship this to production.

[00:02:31] In production, this will just do nothing, the strict mode part of it. But now, if we try and do anything like use any of the unstable APIs or something like that, it'll give you additional warnings about things that you don't want to do. So we're teaching you all the latest in JavaScript.

[00:02:47] So we won't trigger any of these warnings. But if you're in legacy applications, this can be helpful.