FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Introducing the `useState` Hook

Now it's time to start learning about what hooks are and how they can help us. In this lesson, you will learn how to take advantage of the useState hook, which will allow you to maintain state in a functional component.

3.1 Introducing the `useState` Hook

In the last couple of lessons, I've been alluding to, tying in some of the old functionality that was in the previous versions of React before Hooks, where you could do things like tie into some lifecycle events, useState, setState, things like that. Well, now in the next two lessons, I'm going to show you how you transition those class component type pieces of functionality into this new functional component programming model. And it's actually quite simple and you wind up doing it both in a similar kind of fashion. So let's start with the state first. How do I deal with the state of a component in a functional component such as this? Well, like all the other pieces of hook functionality, it's gonna happen through a function. So let's go ahead and do this. Let's go ahead and import another piece of information. In this case, it's a named resource, and it's gonna be useState. And we're going to import useState from React, so make sure you put your curly brackets in here. Because it's not a default export from the React module. So in this case, what I wanna do is I wanna show you how to use state of the component. Cuz right now, we're just assigning this constant, and then we're throwing that data into our GuestList component, which, while works, it's probably not very good practice. And it's not very common that you're gonna write code like that. You're gonna be dealing with the state of your component. So let's bring that into play. When using state within components using Hooks, we're gonna wind up using this useState function. Now this useState function is going to return a couple pieces of information. And what are those pieces of information? Well, specifically, it's gonna return two things that we wanna hold onto. And in this case, it's going to return a variable that we can use to retrieve information from, that's going to be a state object. So that object is going to have state that I can use throughout the lifecycle of my component. So in this case, we wanna hold our guests in there. So we're gonna say guests is gonna be the name of that state object. Now we're also going to get back a second piece of information. And actually, more specifically, it's a function. And it's a function that we can give a name of whatever we want. And that's the function that we're gonna call whenever we want to update this state object. So I can say setGuests. But once again, I can name these whatever I want. It doesn't make any difference. So now I have a state object that I can use throughout my component, throughout the lifecycle of my component. And I have a function that I can call at any point to update that state. So think of that as the this.setState function in the class component model. So in this case, we can also pass in a value into this useState function that's going to allow us to give a default value to guests. So just to show you that that works, let's say that I pass in an empty array. And then instead of passing into the guests attribute here of GuestList, I wanna pass in guests, just like that. So let's go ahead and hit Save. And as that reloads, if I come back over to Chrome, you're gonna see I have no guests here and my data is gone. Well, it's not gone. But the data that I was getting from that constant, that guestData constant, I'm not using that anymore. I'm using guests. And as you can see, I'm setting its default value to empty. Okay, so now how do I wind up getting data in there? Well, we're gonna start with a very simple mechanism to give it some default data, and then we'll move on from there. So the way that we're going to set the data of guests is using our setGuests function. Well, not quite yet. First, we're going to just default the data. So let's go ahead and grab this information here. We'll go ahead and cut that. And we'll paste it into this array so that now we can see we have a default array that has a single object, just like it did before. And I'm no longer using guestData, so we'll go ahead and get rid of that. Now, let's go ahead and save them. So if I were to do that, now you can see I get my information back. And the nice thing is now I have this value here that I can use and set with my setGuests function whenever I want. So now I have this concept of state. So I can write functions in here and I can do all sorts of different things. And I can modify my state and whatever. And now I have the ability to hold onto that information throughout the lifecycle of my component. But once again, we're kinda stuck, and where would you typically set state? Well, a lot of times in the previous class-based components, you would set state either in some sort of constructor or some sort of initialization function. Or you would tie into some lifecycle events that when the component mounts or will unmount or things like that. Or I could maybe make calls to some databases or to a web service and I could retrieve that information back. Now that we're in functional components, we've kind of lost that concept of a constructor or automatically calling those functions when those things happen. So how do we imitate that type of functionality in Hooks? Well, in the next lesson, I'm gonna show you how in Hooks we have now condensed all of those lifecycle events into a single function.

Back to the top