- The next thing I wanna talk about with React
and TypeScript is specifically the useState hook,
because there's a few different things you need to know
about this hook in order to use it to its fullest potential.
So in the most basic use case, if you have a useState hook
and you pass it to default value
it's going to infer the type based on that value.
So I passed it a string.
So you can see here my value is defaulted to a type
of string and this set value is defaulted essentially
to a type that expects me to set a string.
So it's going to return a string
and expect me to pass a string.
And if I try to pass like a number
to the setter, you can see it's going
to throw me an error saying essentially,
hey this should be a string.
Super straightforward stuff.
But what happens
if I don't actually set a default value for this?
Let's say I set the default value like this.
Now I'm going to get some errors.
And the reason for that is
because my value is actually implied as undefined
and that's 'cause I never passed it any type at all.
So it's just assuming my type is undefined.
So you can see here when I'm trying to pass a string
to my setter, it's being like, Hey, you can't do that.
I expect this to be undefined.
If you want to do this where you don't pass
in a default value,
you need to use the generic version of useState.
So inside the angle brackets here
you can pass what the string type is going to be.
'Cause we want this to be a string,
we're gonna say the type is string.
Now when I hover over my value,
you can see the type is string or undefined
and that's just because by default we pass nothing.
So it's assuming my type can include undefined
and then it's also taken
into account whatever I pass in here.
You could manually define this like this,
if you wanted to define it as undefined.
That's going to give you the exact same result.
It's entirely up to you.
It's just important to understand that
if you pass nothing in here, it's going to assume
that your type can include undefined just
'cause you're obviously passing in undefined
as your initial value.
So if you're confused why you passed in a type of string
but the actual value has a type that can be undefined
or a string, that's the reason why.
Another thing to take
into account is what happens if you pass in an array.
For example, if I pass in an array like this
and I wanna be able to add a value into this, for example,
let's say that I wanted to add a new array here
which could be like one, two, three,
you'll notice I'm immediately getting an error from this.
If I go to my value,
you can see that's because my array has a type of never.
And that's because essentially React has no idea
what the type
of this array is going to be.
If I put some default value inside of here,
now it assumes,
okay, I'm going to have a value of a number array
and now everything is working perfectly fine.
But it doesn't know that that's what that's supposed to be.
You can ignore this error.
That's just 'cause I'm using an input down here.
So if for example, you wanna pass it an empty array
again I would just need to type this as a number array
and now everything is going to work just fine.
So really I find with useState
if you're trying to pass it something super generic
as a default value or you're trying to pass it nothing,
you need to make sure you specify exactly
what the type is going to be.
Otherwise, if you're passing it a default value
that's pretty good.
Like for example, you pass it a string,
it's smart enough to infer
that you can just leave off the generic type.
That's the really nice thing
about React and TypeScript specifically.
It's really good at inferring things
and I try to let my TypeScript infer as much as possible,
because it makes me have to write less types
while still giving me the same benefits of type safety.
But oftentimes with useState, you either pass it nothing
as the default value, or maybe you pass it an empty string
or an empty object and you need to make sure
you actually type what that value should be
to make sure you get the correct type safety.