This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "404 Page Redirect" Lesson
[00:00:00]
>> Brian Holt: So I'm gonna show you one more thing here with error boundaries, just so I can show you componentDidUpdate. Now, just so you know, you could totally instead of do this with just componentDidCatch and not use componentDidUpdate. But I just wanna show you how to use componentDidUpdate. So under componentDidCatch here, put componentDidUpdate, so you can see here there's actually quite a few lifecycle methods.
[00:00:25] If you're interested in learning more about lifecycle methods, you can actually check out older versions of this course, right? So I go over them in depth but normally componentDidMount is one that you can use quite a bit to set things up, integrate with other libraries. It's what you run when you first start.
[00:00:42] componentDidUpdate, you still use but not necessarily as much. This will be reacting to kind of updates, which I'll show you here in just a second. componentWillUnmount, if you do a setInterval or if you have to clean up anything, this will allow you to clean up things before the component leaves the DOM.
[00:00:58] And then there's a couple of these as well,
>> Brian Holt: Like component will receive props, it's like I'm about to receive brand new props. And then there's some other ones in here as well, the unsafe ones, which react.stricts will not allow you to use, okay? And remember we put react.stricts around our entire application, it'll warn you about that, so
[00:01:23]
>> Brian Holt: Okay, so what we're gonna do now is we're gonna do componentWillUpdate.
>> Brian Holt: And what we're gonna do here is this is gonna get run every single time that it gets new state or new props. So in this case, I'm gonna say if this.state.hasError, so if something updates this and now this has an error, what I want you to do is I want you to do setTimeOut.
[00:01:53] And give it an arrow function and say this.setState redirect,
>> Brian Holt: true, and then wait for 5000 milliseconds.
>> Brian Holt: So,
>> Brian Holt: The setTimeout here, it's going to run this function and after 5,000 seconds or 5,000 milliseconds rather it's gonna setStates so that redirect is gonna be true. So let's go ahead up here in the state up here, put redirect,
[00:02:42]
>> Brian Holt: False on line 7 there.
>> Brian Holt: And then what we wanna do here,
>> Brian Holt: Is the first thing we wanna ask, and the order here is quite important. You're gonna have to say, if this.state.redirect, then what we're gonna do is we're going to return,
>> Brian Holt: A redirect component which comes from reachRouter and we're gonna say redirect to/
[00:03:26]
>> Brian Holt: As you might imagine, whenever you render a redirect, it just redirects the router to be somewhere else, right? You can also do this programmatically. I could have totally said, and you don't have to copy this, I think it's navigate.
>> Brian Holt: Like that, and this would have worked as well.
[00:03:45] And navigate comes from reachRouter as well, but I wanted to show you both ways of doing that.
>> Brian Holt: You don't want componentWillUpdate, you want componentDidUpdate.
>> Brian Holt: Both of these will work but let's do componentDidUpdate.
>> Brian Holt: Okay, and then let's go make an artificial error again. So just here instead of componenttDidMount, we'll say throw new Error.
[00:04:19]
>> Brian Holt: Okay, and now after 5 seconds, it should redirect back to the home page, which it does.