This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Setting State with Hooks" Lesson
[00:00:00]
>> Brian Holt: I want you to try and type into this.
>> Brian Holt: Congratulations, you broke the DOM. This is actually kinda difficult to do, right? [LAUGH] And this is one of people's frustrations when they first learn to write React is like, this was so simple to do before. Why did we make something simple hard?
[00:00:22] Right, it's a valid thing to say. But I want you to think about how this works. Whenever I type something in here, so if I hit a keystroke right now, what happens is React captures that event. Then what happens is that kicks off a re-render cycle inside of its components.
[00:00:42] So the first thing that happens is it re-renders app. And then it gets done a SearchParams and it hops down into search params. Here, it says const location equals Seattle, Washington. And it re-renders, and what is the value of this input right here? Seattle, right? Nothing changes that, right?
[00:01:04] So when it re-renders again, it's still Seattle's because nothing changed it. So that's why, even when I type in there, it's not changing. So in other words, two way data binding is not free in React, which can be a point of frustration. I used to be an Angular developer.
[00:01:21] I wrote a lot of Angular when I worked at Reddit. So this was frustrating for me because this used to be free to me, right? If, in Angular, just did the NG bind or something like that and it was just bound together and it worked and magical. That's no longer the case and I'm gonna argue for that.
[00:01:36] It's actually a benefit because it forces me to think through everything that's happening. And I'm no longer limited by what the framework is gonna do for me. I have to do it, which I think is a benefit because later, when I come back to it, I can read everything that's happening, right?
[00:01:51] I don't have to know Angular super well or I don't have to know React super well to know what's happening because I can see all the code that's governed. It's very explicit. This is actually kind of just a general trend for React. It's verbose, right? You write more code.
[00:02:06] And that can be a point of frustration. But I argue that this is actually one of the biggest benefits of React because it's very understandable, right? It forces you to think through everything. Which means that when you come back to this a month later, you can re-read all the code that you wrote and understand what's happened, okay?
[00:02:25] So we want to be able to change this now from Seattle, WA to something else. So how are we going to do that? Well, let's take a look at that.
>> Brian Holt: Up here, where it says import React, for me, I'm gonna put comma, { useState }. Then I'm going to import that from React.
[00:02:53]
>> Brian Holt: So instead of having this location here, I'm gonna say const, square bracket, location, comma, setLocation. = useState, and then the default state, which is gonna be Seattle, WA,
>> Brian Holt: Okay? Now, I have this location in this input. The thing you might notice, if you look at the console here, if I look at the console, it's probably gonna say, you provided a value prop to a form without a non-change handler.
[00:03:31] That's why. We're going to give this a on change handler. So I'm gonna say on change = curly braces. I'm going to give it just a tiny function to run whenever an event happens. So I'm gonna say, whenever there is an event, setLocation to be e.target value. [BLANK AUDIO] So this is a little, little tiny function, right?
[00:04:07] And all it does it it takes an event, so you can actually put event there, if that makes you feel better about it. I just have a habit from forever that I call events e.
>> Brian Holt: You can decide if that's useful to you or not.
>> Brian Holt: And if you've ever written an event handler for jQuery or just normal JavaScript, that should look familiar, right?
[00:04:28] It's a normal-looking event handler.
>> Brian Holt: And the other thing is if you have a single line of a function with an arrow function, the curly braces are optional. So I could put that, and then it would look like that, which is fine as well.
>> Brian Holt: So now, any time that a change happens in this input, it's gonna call setLocation with whatever is inside of the input.
[00:05:01] So now if I go back over here and I start typing in here, it's gonna start working again. Now, why? Well, I type, it kicks off a reRender, search param reRenders. And then I have these two things up here, location and setLocation. Location is going to be the current state of location, okay?
[00:05:25] And then set location is an updater for that particular piece of state. So every time that that event happens, right, that I type into there, E is going to represent an event that happened in the input. And then I'm gonna call setLocation with whatever is inside of that particular event, or inside of that input, which is going to update that state that I'm getting here, okay?
[00:05:55] So then, when that re-render happens after that, location is going to now be whatever I've updated it to be. Now it can be a little confusing that I have this string here Seattle, Washington. And obviously, that's not changing, but just keep in mind that this is always the default state, right, the first state.
[00:06:13] And then after that, it'll be whatever it is at that point in time. But that's, you have to keep in mind that that's what happens with these render functions for these components is they're run a bunch of times, right? Every time that you update your application, it reruns all of the renders.
[00:06:29] So you want to make sure that these functions are not doing anything extraneous, right? They shouldn't be updating any function. They shouldn't have any like side effects or anything like that. You want to keep them pretty narrow to the focus of rendering something, okay? So this is a hook, that's what the react terminology is here.
[00:06:51] And one thing that you need to abide by with hooks, all hooks begin with use. Use state, use effect, use callback, use memo, all that stuff, all hooks begin with use. Even the ones like custom hooks, we're going to make a custom hook [COUGH] excuse me. We're going to make a custom hook here in just a second.
[00:07:13] But if you see use something, it is a hook. So this is how you have stateful logic with React is with these hooks. So now at any given time, just to demonstrate to you, I'll just say a console.log('state of location', location).
>> Brian Holt: Or even better, let's do this.
[00:07:48] Let's just put an h1 right here.
>> Brian Holt: That has location in it.
>> Brian Holt: So now it says Seattle, WA right there, right? And if we start typing in there, notice that it's changing alongside of, because every time it re-renders, right, it's outputting that location there. So I could put Salt Lake City, Utah.
[00:08:20]
>> Speaker 2: Is using state different than setting state in this context, then, because it's setting a default, out of the box here.
>> Brian Holt: Yes, so useState is like creating a hook, right? So and, when you get back a hook, you get back an array of two things. The first thing is always going to be the current state of it.
[00:08:45] The second thing is always going to be an updater function for that particular piece of statement, right? So useState creates the hook. This is called set location because I chose to call it that, but you could totally call this updateLocation. It's a function that gives you back the updates that particular thing.
[00:09:03] I choose to always call it set because then I can kind of see it, but that's just a convention that I have. That's not an industry best practice or anything like that. Does that answer your question? Cool. I should call out here, this might look a little weird to you.
[00:09:18] This is also destructuring, right, because I know this is gonna be an array. This always gives back an array. And I know that the first item is always the state, and I always know the second item is the updater function. So that's why that's an array. Makes sense?
[00:09:33] Cool.
>> Brian Holt: So historically, if you've been writing React, you would have had to use something called set state, right? This is kind of supplanting the need for set state for these function components. I will show you later how to do that because it's important cuz it's still very much a part of the React ecosystem.
[00:09:57] But for now, this is the way to do state with hooks.