Check out a free preview of the full React and TypeScript course:
The "useState Hook" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to toggle a blur className using the useState hook. The useState hook in TypeScript will check the current state of the variable and change it to something new with the same type.

Get Unlimited Access Now

Transcript from the "useState Hook" Lesson

[00:00:00]
>> So right now we've dealt mostly with the props that we pass in, which is great and wonderful, but there is the use case that we might want to pass in some state as well, or managed state in our application. And first, we're gonna talk about this in two different ways.

[00:00:21] So, we're gonna talk about state that we know about and we're gonna talk about state that we eventually get, right? A great example of state we might eventually get is state like, okay, we're gonna fetch stuff from an API when the component mounts, we don't have that yet, right?

[00:00:36] And a lot of times if we can use defaults, it's something along those lines, right like that works, right when you say like, okay, like we don't have the user's first name from the API. Yeah, but we might choose to use empty string for now, that's usually super helpful and we'll see for reasons.

[00:00:54] But there's some cases where we don't actually necessarily know the shape of everything as the component loads. All right, so let's take a look at this. Let's start up here. We haven't actually implemented the state part yet, but we're gonna have a few questions and we wanna do is be able to toggle them.

[00:01:23] And so right now they are blurred and eventually we want to take off that class name in the event that they hit toggle answer, right? So our state in this case will be whether or not the answer should be hidden, so let's go ahead and we will kinda define that.

[00:01:40] Let me pull in, let's just say use state. I was hoping for the auto import, it's one of those things some of the time works every time. So when you start as react from react. Okay, so now we've got, let's say is hidden and toggle hidden. And we're gonna say that by default, it should start out as True in this case, right?

[00:02:18] So, first of all be hidden if you make that shown as well. One of things I wanna point out is we didn't really have to use any type definitions here, right? I could do something like this and we'll kind of explore this is a generic which I'll explain a little bit later in the course where we could say that it should be a boiling, right?

[00:02:39] Cuz we know that react use state takes lots of different art and take basically anything that's gonna be the default value of whatever the state is. And then toggle should then only be able to switch it to something new. Now in regular JavaScript you can start with the state as a boolean and switch it to a string and then accidentally set it as undefined, or something along those lines.

[00:03:01] TypeScript is going to enforce that, whatever it was when you first set it should be what it is in the event that you set it to something else. So we can define it, which point you can see that it knows that is hidden should be a boolean. And if you look closely at the definition of toggle hidden, so it's got some ceremony around, it's got reactive dispatch, and as dispatching and react set state action.

[00:03:30] Cuz you can learn a little bit about has might just be using a reducer under the hood, right and it's expecting that it gets a Boolean. So not only is it a Boolean but like when you go to set the state to something new that can also only be a Boolean as well.

[00:03:43] But what's kind of interesting is I can get rid of that. right? And this is kind of one of the core concepts that we are going to explore a little bit in our time together. Which is TypeScript is going to analyze your code to try its hardest to figure out what you meant without you having to tell it everything about everything that you're doing, right?.

[00:04:07] And so I think sometimes when there's complaints of yeah, TypeScript, but there's so much extra ceremony that I have to go through in order to get anything done. And to be clear, that was definitely true a while ago, but these days there's a lot that it will do to try to figure out the intention in your code and get out of your way.

[00:04:23] The times that we're gonna have to kind of step in there and really kind of guide TypeScript is when it doesn't have enough information to figure that out. But in this case, it does react use state, you're passing in a Boolean as the initial value. So it's like is hidden is probably going to be a Boolean and when you toggle it, it's also probably going to get toggled to another Boolean, right?

[00:04:45] And we didn't have to actually necessarily define the type or say anything about it, it can manage a lot of that stuff for us. And again, if I change this to something else real quick, right, like we can see if we hover over this. Now assuming as a string and you're gonna set it to another string, but out of the box we don't that's a terrible name.

[00:05:10] So we're gonna say that it is true and we'll be able to use it as such. So here's what we're gonna say is, we're only gonna give it the blurred class in the event that it is hidden otherwise we'll give it a visible class or something. So here we'll say, If it's hidden give it the blurred otherwise give it visible, it's hidden.

[00:05:46] Cool, all right nothing changes cuz by default that's set to true. The other one that we're gonna do is give us a button to just toggle that. On click, just give it a little click handler. And we'll say toggle hidden. And yeah, I'll totally give it the string false.

[00:06:11] That doesn't work, but like zero's fallacy actually work, right? Cuz JavaScript this would theoretically for reasons that I want to talk about work but in TypeScript it's, no, I understand the zero is fallacy. Or no is false but like it literally you said a Booleen, right? So instead of an accidental value that might work and then might have a bug like six months later and then you get blamed and you find out it was you, right.

[00:06:39] In this case, we will see that like, like typescript again like listen, you taught us the intention this code is to toggle to a Boolean, I'm going to ask the you do that. There are ways which we'll se in a little bit, to say listen this could be one thing or the other thing.

[00:06:51] Or this could be null or a value. We'll see all of that but out of the box you can, it's gonna basically look at what it was and try to ask you set it to the same thing. So now Back in Black is the first song in Iron Man Thor took a class and speaking group and the first stone that power first infinity stone that that I was got was the Power Stone, right?

[00:07:16] I don't think any of those are spoilers, so I think it's fine. But we can go ahead and we can say that a lot of there's not other nice question prompts, which again, is not much more than using prop types, which is again, mostly trying to save you from yourself.

[00:07:29] TypeScript is doing a lot of this for us under the hood, and there's not a lot that we need to necessarily deal with out of the box.