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

Lifecycle Methods & Error Boundary Q&A

Check out a free preview of the full Complete Intro to React, v5 course:
The "Lifecycle Methods & Error Boundary Q&A" 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:

Students ask for clarification on the componentDidUpdate, and getDerivedStateFromError lifecycle methods, how React uses unhandled errors, as well as whether it's possible to use error boundaries with hooks.

Get Unlimited Access Now

Transcript from the "Lifecycle Methods & Error Boundary Q&A" Lesson

[00:00:00]
>> Speaker 1: You talk a little bit about when the componentDidUpdate lifecycle methods?
>> Brian Holt: Sure, let's get rid of all the error stuff really quick. So here,
>> Brian Holt: Inside of componentDidUpdate, so componentDidUpdate is gonna get called when props change a state change, that's about it, right? So it's very much similar to useEffect, right?

[00:00:27] So useEffect gets running whatever its dependencies update. componentDidUpdate is gonna get run every single time that a proper or state changes, right? So that's why I say, if this state.hasError, right, then set this to be something else. Now, I could have just said this, because this only has one piece of state.

[00:00:46] But what happens later if this has more state, you wanna be specific, like this reacts to this, right? So in this particular case, this is reacting to componentDidCatch gets called, right? Or no, sorry, getDerivedStateFromError, this gets called, this updates the hasError to be true, which is then going to call componentDidUpdate here.

[00:01:08] Does that make sense?
>> Speaker 1: Yes, thank you.
>> Brian Holt: Of course, good question.
>> Speaker 3: Could you actually talk about the getDerivedStateFromError? How does that get called? How does React know to run that function?
>> Brian Holt: Sorry, this gets called whenever there's an error inside of it, right? And so because it's a static method, it can call it on the class and not on the instance, not that that's really a thing that you really care too much about.

[00:01:38] But what it'll do is it'll call this method, it'll pass in,
>> Speaker 3: Is that because of the naming convention that it knows to call it?
>> Brian Holt: Yes, I guess, I don't-
>> Speaker 3: Okay.
>> Brian Holt: Yeah, so it has to be called this. This is a lifecycle method in that sense, right?

[00:01:52]
>> Speaker 3: Okay.
>> Brian Holt: Just like we had, what was the-
>> Speaker 3: On carousel?
>> Brian Holt: Yeah, on the carousel one as well, getDerivedStateFromProps.
>> Brian Holt: So yeah, it'll pass in the error here. For us, we just know there's an error now, so we're gonna update that state and then it's going to re-render with that new state.

[00:02:13] Does that make sense? Cool.
>> Speaker 4: If there's an error in production that's not handled, what does React do?
>> Brian Holt: It unmounts.
>> Speaker 4: Right.
>> Brian Holt: Yeah, it just takes the entire thing out of the DOM. So a lot of companies will just have one top level error handler, and that'll handle the entire app.

[00:02:34] But you can also have multiple levels of maybe your footer has a lot of errors. Maybe you shouldn't have that footer. But maybe it does, right, but then you could have one specifically for your footer, right. Yeah, Mark?
>> Mark: Can error boundaries be used with functional hooks?
>> Brian Holt: No, because getDerivedStatesFromErrors, there is end component to catch for that matter.

[00:02:58] There is no equivalent for these with hooks. So this one you actually have to use class component.
>> Mark: Currently?
>> Brian Holt: Currently, there's no plans to fix that, but that isn't to say that, there won't be plans. But yeah, currently there's no way to do it with hooks.
>> Mark: So could you use it to wrap a component that's using hooks?

[00:03:20]
>> Brian Holt: Right, yeah, because this.props.children can be anything, right? It has no opinion on whatever its children are gonna be doing.