Typing useState

[00:00:00]
>> Steve Kinney: OK, so between the name tag and arguably the little fun escapade into trying to deduce what the type of children are, I mean, we've got some of the added text to React, but we are missing one fundamentally compelling piece, which is right now this could have been HTML. Right, we are not actually managing any state just yet, but we're going to now, because that's arguably where the interesting part is, you know, taking that state, passing it around.

[00:00:39]
If we just had a bunch of HTML components, whatever. So we will jump into this accident counter, and I'll kind of just spoil the surprise, which is we're going to look at managing some amount of state. We're going to look at then managing asynchronous state, like most famously from getting it from an API, right? We'll look at it from a useState angle, we'll look from the useReducer angle. We'll eventually look at it from a context angle, so on and so forth, and play from it all those different ways.

[00:01:17]
The interesting part, of course, things get a little trickier when stuff is async, but we'll find our way around that too. But our first kind of foray is just going to go with the normal kind of synchronous thing in this case, which is having some state that a component manages in this case and can work with. And we will kind of slowly build on top of that to greater and greater levels of sophistication, but we're going to keep it again, starting fairly simple at this point.

[00:01:47]
So our counter, again, if looking at it is helpful, and I would argue it can be, yeah. We can go to the accident counter, we can take a look at the counter. It looks like, I don't know, some buttons and a number and an input field. Nothing works because we don't have any state to speak of in our application at this point yet, but we're going to fix that. So, in here, we want to at least start with some concept of useState and figure out how to begin to increment the number.

[00:02:18]
Now, the important part here is you're like, I know how to use useState. Yeah, me too. The important part is as we go through one, see again, if TypeScript can figure out what a value is, then can we use enough of that inference to get us there. Two, then when we get to stuff like some of the event handlers and stuff like that, can we actually again use IntelliSense to figure out what types are without necessarily having to look everything up, right?

[00:02:52]
And can we use our tools to figure stuff out. And cases where we need to say, hey, it is of this type in this case, but we don't in another case, what makes those two cases different? Why can we do it sometimes? Why can we not, right? We're going for the conceptual understanding. I understand that most of us will be able to make a number go up and down, right? So with that, let's make a number go up and down.

[00:03:24]
So we can say const and we could say count, set count, useState, and we'll start just with that for starters. And if we just say useState, we end up with the, other than the fact that it's angry that we're not actually using it, so we'll put it in here just to get it to be quiet for a second. If we look at this count, it is undefined. Which is tricky because, I mean it's true if we think about how functions work in JavaScript, what did we pass to useState, we did technically pass it undefined, right?

[00:04:05]
So if we did say, hey, actually counter should be a number. Right, now it knows that it could be number or undefined because we didn't give it a default value. If we then try to give it f, it gets very angry with us with the red squiggly line of anger, saying string is not assignable to numbers, and this should be a function that returns a number. OK, fine. So then we give it a number. You're like, great, neat.

[00:04:36]
And, you know, now everything should work, and so we can go in here and we can say something like, on click. And we'll say that set count to count plus one, yay. What are you angry about? Oh, I've made a fake button that I now regret, so let's turn these back into regular buttons for a second. And we'll say on click. We'll say that we'll do set count to 0. And here we'll do on click. Is set count.

[00:05:38]
Except I made one slight boo boo, which is my brain thinks increment, reset, decrement, and so I gotta switch that and that. Theoretically it works, it will just, the buttons will do the opposite where they're labeled, and that doesn't seem great. OK, so nothing special here, nothing particularly surprising, but the important part I said is if at any given point, TypeScript can figure out on its own through any amount of inference, what type of value is, then you can get out of the way, right?

[00:06:13]
Getting in the way is helpful if you're like, and I want to make sure it is this thing, but we can get rid of this generic right here. And again at this point, other than saying .tsx at the end, there's very little TypeScript, but it has figured out that count is a number, right? More importantly, it has figured out that, and this looks a little wild, but if one squints at it, it kind of makes sense, which is that set count will only take a number.

[00:06:50]
So if this was JavaScript and we didn't, if it all was a different file extension, you could technically set count to the string 0, the string 1, so on and so forth. And you would have to protect against that in all sorts of different fun ways, or just hope for the best, that's usually what you would probably do. In this case, it knows that if count was set to a 0, then set count should only take a number, right?

[00:07:15]
Turns out that set or useState is an abstraction over useReducer, so that's why you see that .dispatch and an action. We will actually learn how to do that ourselves in a minute or two, but now you can only, if you try to say, hey, I'm going to set count to 0, you will get yelled at, right? Where you would not in traditional JavaScript. And so that's a nice, again, bonus in this case by simply letting it figure stuff out in this case.

[00:07:48]
More importantly, if we use the other syntax for sets that we give it a function and it gives you the previous value, we can see that that is also correctly typed as well. So we can do previous, and we'll say this is now previous plus one, we can see that previous is also correctly typed, right? And we'll learn how to do this with generics and all that fun stuff in a little bit, but we're trying to, when we get to that concept, you've seen it in practice enough that it all makes sense.

[00:08:18]
We get everything kind of set up the way that we want. The other more important thing though is, again, for most of the time, the way that we're going to try to find answers is just using our editor. So like, what's the type of a click handler? That's a great question. I'm glad you asked it. Again, there's some amount of squinting because React, you know, kind of has its own version of events, so on and so forth, right?

[00:08:42]
But we can mostly see that, you know, it's got those DOM attributes for HTML button element, right, because sometimes events have different properties based on what type of event they are and also what kind of HTML element they come from. And so we can see that that is a React.MouseHandler with a button element, right? Or undefined because you don't necessarily have to put an onClick on every single button.

[00:09:05]
You'll notice that the button components that I had pulled in, we don't actually support that yet, we will. And so we're going to have to figure that out at some point and we will. So with the regular button, we can see that it has all of those things and we can pass it in again, when you don't know the type of something. The answer is mostly to try to just in the current context that you're in, see if you can figure it out.

[00:09:32]
So we've got those buttons, they can do a thing. Let's actually make sure that my code works because that seems good. We can decrement, we can increment, we can reset. The buttons don't look pretty, but we'll deal with that. Your decrement's still incrementing. Oh, because I literally added the plus sign after changing it. This is why you pair program with all your best friends. There we go. Sweet, and so now we've got all of that in place.