This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Hooks" Lesson
[00:00:00]
>> So the next section we're gonna hop into is Hooks. Hooks was a really big deal when React version 16.4, I think, came out. It was a whole new API for managing state inside of your React application. And I would say it's really easy to learn up front.
[00:00:23] So I think this is gonna be a pretty fun experience for you. But they do have some kind of odd issues that arise later. And I'll let you kind of be the judge of if you like using Hooks better or class components. We'll talk about class components later.
[00:00:33] But basically it's a way of managing state, right? So I have a text box on the page and it's gonna say, Brian and then I wanna erase it, and then I wanna put Steve in there, right? And then that state of that input is gonna be tracked through a hook.
[00:00:48] So let's actually go do that right now. So I want you to go to your React application and I want you to create a new file here inside of your source directory, Called SearchParams.js. It's gonna be kind of our homepage. We're gonna start building our pet adoption app.
[00:01:13] So this will be like the home page where people can search for things. So I want you to make a React component called SearchParams, const SearchParams. That's gonna return some mark-up here. That's gonna be inside of a div, call it className = search-params. And then here at the bottom, very important to export default SearchParams.
[00:01:48] First thing I wanna talk about here, why is this className instead of class? Well, you have to remember we are inside of JavaScript, right? And the word class is a reserved word, right? I can't say const class = lol, right, because this is technically not valid JavaScript because class means something else in JavaScript.
[00:02:11] So same thing here. We call it className, instead of just class. Now, to be fair, className is actually the name of the JavaScript API for modifying a class. So that it's not that the React team was making it up. They used the official JavaScript name for that API.
[00:02:31] Okay, and again, if you follow my class names, you will get all the styling for free. Okay, so we're gonna create a form here. And we're gonna have a label ,and normally you'd have for here, right. But again, for, reserved JavaScript word for for loops, so you have to call it htmlFor location, And we're gonna call location.
[00:03:04] And we're gonna say input id = location, value =, now here I can put something like Seattle, right, or something like that. So this is going to be bound to whatever I put in there. In fact, let's just put it in there for fun right now. And then placeholder = location.
[00:03:34] And then again self closing tag/angle bracket. Okay, and then underneath the label here, we're gonna put a button, then just call that Submit. So, should make some sense, right? We have a div here, it's gonna have a form in it with one thing in it, which is gonna be this location control which is gonna be an input of type text, right?
[00:04:09] And then the value here is gonna be Seattle WA. And the placeholder is gonna be location with a submit button on there. So nothing here too surprising. What happens if you wanna track the state of location? Cuz right now, this isn't being stored anywhere, right? But I wanna actually use that somewhere else.
[00:04:30] So what I'm gonna do is I'm gonna come in here and I'm going to, Well, yeah, let's do it this way, this is actually probably even easier. So I'm gonna say const location = Seattle, WA. So this is now a variable, and I want this to be reflecting of that.
[00:04:50] So I can't just put location here. Why not? Cuz that would literally be the string location. So what you can do here instead, I'm gonna delete those, and I'm gonna put curly braces around it like that. And now I can put location, so it's gonna be reflective of this location.
[00:05:09] So that's what those curly braces mean. It just means it's a JavaScript expression. So if I wanted to, I could say toUpperCase, right? And now whatever location was, it would always be here as JavaScript toUpperCase, right? So it can be anything that can be the right side of an equal signs.
[00:05:26] That's called a JavaScript expression. Okay. So now I have all this setup, we actually need to go render it, right? We made the stamp. Now we need to go stamp it. So we're gonna go back to app.js, And we're gonna import from SearchParams. From ./SearchParams. We can go ahead and delete your pet import for now.
[00:06:04] And delete these three here and I'm just gonna put SearchParams directly on there like this. Okay, good? So now I have my SearchParams page, all these. I have my app.js where it's importing from that, and it's rendering it out there. So I would expect to see Adopt Me at the top, my nice little logo, and my SearchParams underneath that.
[00:06:36] So, let me make sure that mine's not running, so I'm gonna say mpm run dev, to get my server running, And I'm gonna open that in my browser. So now you can see, I have a nice, little search control here. And if I click on it and I start typing in it, doesn't work.
[00:07:03] That's kinda strange, right? You would expect that you start typing in it, and it would start working. It's actually kind of difficult to break an input control in the browser. So congratulations, you did something difficult. If you open your terminal, it's actually gonna tell you, hey, this isn't gonna work by the way.
[00:07:20] You didn't actually tell me to update anywhere. So I'm just gonna always put that there. So you have to keep in mind of how React works. Every time that React detects a change anywhere, right, it reruns its render cycle. So in this case, when I type a key here, it's going to tell React, hey, something happened.
[00:07:43] React is going to kick off a rerender cycle, and it's gonna rerender whatever it has. So let's go investigate that a little bit. If we come back over here to SearchParams. If I kick off a new rerender, it's going to setLocation = Seattle, WA, and then it's going to render that there, right?
[00:08:02] So that means every time that I click that key, it's rerendering and it's grabbing Seattle, Washington here, and it's rerendering it there. So no matter what I type there, it's going to ignore it because it's always going to rerender as Seattle. So I have to give it the mechanism to update itself.
[00:08:16] Now, other frameworks, you might get something like what we call two way data binding, that was really popular in Angular JS when it came out, that if I type something, it automatically bound that to a variable and vice versa. If I updated the variable, it update that to the DOM.
[00:08:33] React doesn't have that, you have to actually do the wiring yourself. Luckily, it's actually quite simple. So let's go ahead and take a look at how to do that. So the first thing up here I want you to do is I want you to import at the top, useState from React.
[00:08:51] useState is what is called a hook, right? A hook allows us to keep track of state as indicated by the state part of this. Another thing to note is hooks always begin with use. useState, useEffect, useDebugValue, there's a bunch of them. useState is probably 95% of what you're gonna use.
[00:09:15] Okay, so instead of this location here at the top, I'm gonna say const, I'm going to put square brackets, setLocation, = useState with a string of the default value, the first time value. So the first time value of this is Seattle, WA, and then get rid of this line.
[00:09:46] Now we have a hook here that allows us to have this location and then this piece of state that it will track over time. So now we're already using this location here. But the other thing we wanna do is say onChange. So whenever this changes, whenever the user does something, it's gonna give us back a function that gives us back an event.
[00:10:08] So I'm gonna call that event E. You can call it event if you want to. But we're gonna say E, and then we're gonna give it a function. And then I'm gonna say setlocation(e.target.value). So if you've never seen this style of function before, this is a one line arrow function.
[00:10:34] I mean, if you wanna make this super verbose, you can say, function updateLocation, that takes in an event. And then you can say setLocation(e.target.value). And then here, instead of putting this here, let's just do this so you can see, Like that, updateLocation. So these two lines, if I got rid of this one, are functionally equivalent, right?
[00:11:12] They're doing exactly the same thing. This is just a shorthand way of doing that. So we'll stick to that cuz I think that it kinda keeps it really easy to read. So now if we head back over to our page, we can actually type in it now, right?
[00:11:37] So this is how you do the data binding between you and the DOM, is you just use hooks to do it this way.