Check out a free preview of the full Complete Intro to React, v7 course:
The "useState Q&A" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers student questions regarding what the setPets function is, how the setPets function is written, and how the useState hook keeps track of what is being set.

Get Unlimited Access Now

Transcript from the "useState Q&A" Lesson

[00:00:00]
>> So with regards to the concept behind hooks, for example line 11 const pets setPets, what is setPets? I noticed we never declared a setPets function elsewhere, is that the declaration?
>> Yeah, so you can think of pets and setPets here is pets is a theta state. And setPets is a state updater, right.

[00:00:22] So it's a function that you can call the dispatcher. So if you look at it here the name of the type, right. It's basically like I have something now that I want to update. So that pets comes back next time on the next rerender as this, right. So wherever you call setPets whether it's gonna blow whatever is in pets is something brand new.

[00:00:46] Does that makes sense.
>> Yeah.
>> Yeah.
>> Then what about the assignment when we say equals useState and pass in an argument.
>> Right, so this is peculiar. This is the way that the React team chose to do this. I think most people had not seen this before.

[00:01:01] So it kind of melted their mind a little bit. But let's just break this down, this is called destructuring. So I'm gonna make two things and these two things are gonna be totally equivalent to each other. So I'm gonna say const petHook = useState, like that, right. This is now an array of two things.

[00:01:23] The first thing is the state the second thing is the state setter right, or the state updater. So then now pets equals petHook

[0]. And const setPets Equals petHook[1]. These two things do precisely the same thing one this is just shorter. Now you're probably wondering yourself, but how comes up with that kind of API, right.

[00:02:02] This doesn't make any sense. The reason why they did this is it's just quick and easy to write and you write hooks or useState quite a bit. So it's faster, right. Since no one asked here's how I would have done it. Like state pet or it's, we doing the right way anyway, yeah.

[00:02:27] SetState: setPet. UseState block, right, this gets a little bit more explicit if this is destructuring an object, right. So that then you know now that I think I did this the opposite way, though. So maybe this is bad because I can't remember which order the things go in, but it becomes more obvious.

[00:03:05] This is the state and this is the setState as opposed to this just being an implicit order. Or a tuple if you will, or tuple but it's actually tuple but I like to say tuple instead.
>> And I'm curious and maybe this doesn't make a lot of sense.

[00:03:20] But so line 7, 8, 9 const location, animal, breed, they all are assigned useState state with an empty string passed to it. But does the hook then still know there's a difference between them based on that first argument?
>> Let's say it a different way.
>> [LAUGH] So even though we've assigned useState with an empty string to each of those.

[00:03:43] Is it something to do with that first parameter either location, animal or breed. That makes the hook kinda recognize that those are separate?
>> Got it, okay. So when you call useState, it's keeping track of the order of what you call these, right. So you might think this will give you back the same thing.

[00:04:03] But it's giving them back a different piece of state every single time. This thing that you give it here, it's the initial state.
>> Okay.
>> So this is an empty string. This is a different empty string. It is an empty string, but it's a different one, different empty string.

[00:04:19] And this is a yet different one, right. And so here we're giving it an empty array. But after this gets set the first time, it doesn't matter whatever was there, right. That's just for the very first rendering call. You can basically think of what React is doing is it's just waiting.

[00:04:37] It calls this function and then it counts which one is giving. And so it's giving you back just first one gets this one. The second one gets this one, the third one gets this one, right.
>> And that's why you established that the order that
>> [CROSSTALK] It's critical.

[00:04:50]
>> Essential in the loop state and things like that are invalid.
>> Cool, makes sense?
>> Yeah.
>> Cool, good questions.