Complete Intro to React, v6

Complete Intro to React, v6 Loading State & Lifecycle Methods


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 "Loading State & Lifecycle Methods" 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 walks through setting a loading screen using this.state.loading and discusses the other lifecycle methods available. A student's question regarding if class components are the only way to obtain lifecycle components is also covered in this segment.

Get Unlimited Access Now

Transcript from the "Loading State & Lifecycle Methods" Lesson

>> I showed you component DidMount, which is something that gets run at the end, or sorry, at the beginning of every component being rendered, right? It renders for the first time. So you can display a bunch of stuff like a loading state or something like that. Then you can go fetch all of your data, and then you can show all the data from the API.

[00:00:21] So at the top of this, let's say if this .state.loading. So if it's loading, what we wanna do is we wanna say return Loading. Here you can imagine like hey, I'm gonna have like this really nice loading spinner. It's gonna have like a cute little puppy doing something or something like that, right?

[00:00:45] That's what you would do here. In this case, we're gonna be really lazy and say loading. Let's go look at our app really quick. You can see just for a flash of a second, you see right there that loading. That's what that does. So that you immediately show the user something, hey, we got your request, we're loading stuff in the backend right now.

[00:01:04] So they feel like okay, they're listening to me. Obviously, it's going really fast. Because it's on my local computer but like if you're on a slow connection on a server across the world, that could be a couple of seconds that someone's looking at a loading screen. Which is why we keep track of this loading here, so we can always know are we loaded or are we not?

[00:01:22] Are we waiting for data? The other thing is I only showed you a componentDidMount, but there's actually quite a few life cycle methods. So I showed you the constructors as well. This used to be called componentWillMount, but now with classes that's the constructor. We have componentDidMount. And there's a lot more there's get derived state from properties, right?

[00:01:46] Which is like I have props coming in, I need to get some sort of derive state from that. This is a method that allows you to do that. There's one called should component update, which is like a performance optimizer where it's like, hey, these things changed. Do you wanna update the react component or you just wanna stay pat?

[00:02:01] And you can make that determination here. You can do componentDidupdate where like hey, I got new props, I need to go request more data, right? So some of these things are with hooks just become unnecessary to track, but with class components need to be a little bit more hooked into the life cycles.

[00:02:22] That was a poor choice of wording hooked into the life cycles. You need to be more aware of the life cycles going on with react. So I'll leave you to peruse this documentation here. There's a lot more of these lifecycle methods for class components. But for now, I think this is probably pretty good we can leave it with this.

[00:02:41] Our class components, the only way to get life cycle components. The answer that is yes, mostly. And the reason why I say mostly is because so let's hop back into our search params I think So we have this use effect right here on line 14 through 16. This is componentDidMount, right?

[00:03:09] This does exactly the same thing as componentDidMount, that it runs this immediately after its first render. This function is precisely the same as componentDidMount. So they're gonna be called different things and they do work in, may be subtly different ways, but functionally they're exactly the same. But if you actually specifically wanna use componentDidMount, you have to use a class component.

[00:03:33] But you can use effects to approximate /basically get all the life cycle methods. There's only a few that class components don't handle, one of them is with error boundaries. We're about to get to error boundaries, so I'll talk about that momentarily. So there's a very very slight few of things you can only do with class components but for the most part, you can do anything with either type.