3.2 Lifecycle Events With the `useEffect` Hook
In addition to the
useState hook, another very common hook is the
useEffect hook. The
useEffect hook is used to tie into the lifecycle events of components and execute functionality when these events occur. But be careful! I'll show you a common trap you might fall into.
1.Getting Started4 lessons, 16:04
2.Creating the Guestbook Components4 lessons, 26:13
3.Using Hooks in Functional Components2 lessons, 12:28
4.Creating and Editing Guests8 lessons, 52:32
5.Conclusion1 lesson, 01:40
3.2 Lifecycle Events With the `useEffect` Hook
Now that we've re-introduced the concept of state into our React application using Hooks, it's time to talk a little bit more about how to introduce the concept of lifecycle events into our React Hooks application. And we're gonna do that in a very similar fashion to how we did useState. And now in order for us to tie into those lifecycle events, we're gonna use another hook called useEffect. Now what useEffect is for is to be able to tie into those events, such as when your component mounts or when it needs to update to kinda retrigger some sort of activity that's going to help you to re-render or do some sort of operation. So now we left us hanging a little bit there with the setGuests concepts. We're able to initialize our guests state using useState and we've used it now in our component. But how do we call the setGuests and how do we start to use that maybe when our application or when our component loads? So let's go ahead and do that now. So the first thing that we're gonna do is we're gonna use this useEffect hook or function. So I'm gonna come right down here. And similarly to what I did before with useState, I'm simply gonna call useEffect. And what this takes in is basically a callback or a function that's going to get triggered and execute when our component loads or when it needs to re-render itself. So I'm simply gonna do something very simple right now. I'm gonna create a very simple function here. And I am going to have it set the guests using the setGuests function to what this kind of initialized state is here. So all we're gonna do is we're gonna call our setGuests function. And I'm going to pass into it exactly what we have in here. And you can see here it's gonna take in a collection of objects that look exactly like this does here. So I will simply do setGuests and I will paste in here this collection right here. We'll paste that in. And just to be very explicit here, we're going to initialize the state to an empty array, just like that. So I'm gonna save this. And you're gonna see that in the background, it's going to re-render. And you're actually gonna see that we're gonna continue to get the information here. But let's take a little bit of a closer look. Now, depending on your setup here, you may get some squiggly lines in here under useEffect. And this is going to say that you're calling setGuests, you're calling a function that's going to update state within useEffect. And this may have some side effects, but we're gonna talk about what that exactly means. So what's happening here when I am tying into this useEffect hook is that the same function is getting called at different lifecycle events, at the time when the component loads, when it needs to update. And when does it need to update? Well, when the state of the component changes when I call this set function that's provided by the useState hook. So how is this affecting us? Well, it doesn't really look like anything bad is happening here. But let me introduce really what the problem is here. If I were to add in another line of code in here, so after I call setGuests, I'm gonna drop down a line and I'm gonna call alert. And I'm just gonna say useEffect fired. So I'm gonna write that alert message and I'm gonna go ahead and save that. And just as you would expect, my application reloaded and I can see my data there and I see useEffect fired. Okay, well, that's great, but now if I come in here and hit OK, you're gonna see that every single time I close this dialog, this pop-up, it fires again. So as you can see, what's basically happening now is we have entered into an infinite loop that's going to continuously call over and over again. And why is that? Well, let's take a look at this. What's happening now is because I'm calling useEffect, this is gonna call setGuests on the initial time that my component loads, and it's gonna call this setGuests function. Well, once I call the setGuests function, that's going to trigger my component to say something about this component has updated. Because its state has updated, I need to rerun the useEffect function. And it's going to do this again, and it's going to call setGuests again. And you've basically just created yourself an infinite loop. Now, how do you get around this, or because this is probably a very common use case of something that you're gonna do fairly regularly by having your useEffect function. And maybe in here, instead of calling setGuests with some predefined data, maybe you're calling a database. Maybe you're calling a web service and you're getting some data back and you wanna set the initial state of your component. And this is a very common thing to do. So how do we get around it? Well, one thing that we can do is we can come down here and we can pass a second parameter into the useEffect function. And it is an array of dependencies. And really, all that means is it's a little bit of a confusing term. It's not really a dependency in the way that I think of a dependency. All it is is giving an array to the function to say these are the variables or things that I want you to watch. And if they update, then I want you to re-render. So the way that we can get around this little problem we have here is by sending an empty array of dependencies. By doing that, we're saying, I don't care how many set state functions we're using, I don't want to ever run this useEffect body on any sort of updates, because I'm not passing in any value for this. So it's only gonna run this useEffect function when the component loads. So if I save this, I'm gonna have to probably close out a couple dialogs here. But once it reloads, you're gonna see that my little dialog box went away. So if I refresh this, you're gonna see useEffect is fired, but only one time. It only happened to unload, and then it goes away, and now we don't have that infinite loop scenario. But once again, if I was really wanting for my component to reload every single time something changed, well, then I could come in here and I could say, I want to specify a dependency of guests. So I want my component to watch the guests variable, which is my state variable. And every time it updates, I want to re-render this. So I can go ahead and hit Save, let's rerun this. And as you can see now we're gonna get back into that infinite loop, which is obviously not something we wanna do. So I'll go ahead and remove that, so we have the empty array again. And then we'll have this reload. And now we are good to go. So now you've seen some of the basic hooks that we can use in our application, specifically useState to handle state, and useEffect to handle the different lifecycle events of your component.