1
00:00:00,150 --> 00:00:01,890
- The next thing I wanna
talk about with React

2
00:00:01,890 --> 00:00:04,470
and TypeScript is specifically
the useState hook,

3
00:00:04,470 --> 00:00:06,000
because there's a few different
things you need to know

4
00:00:06,000 --> 00:00:09,030
about this hook in order to use
it to its fullest potential.

5
00:00:09,030 --> 00:00:11,430
So in the most basic use case,
if you have a useState hook

6
00:00:11,430 --> 00:00:13,140
and you pass it to default value

7
00:00:13,140 --> 00:00:15,120
it's going to infer the
type based on that value.

8
00:00:15,120 --> 00:00:16,110
So I passed it a string.

9
00:00:16,110 --> 00:00:18,240
So you can see here my
value is defaulted to a type

10
00:00:18,240 --> 00:00:21,150
of string and this set value
is defaulted essentially

11
00:00:21,150 --> 00:00:23,280
to a type that expects me to set a string.

12
00:00:23,280 --> 00:00:24,360
So it's going to return a string

13
00:00:24,360 --> 00:00:25,740
and expect me to pass a string.

14
00:00:25,740 --> 00:00:27,150
And if I try to pass like a number

15
00:00:27,150 --> 00:00:28,650
to the setter, you can see it's going

16
00:00:28,650 --> 00:00:29,940
to throw me an error saying essentially,

17
00:00:29,940 --> 00:00:31,290
hey this should be a string.

18
00:00:31,290 --> 00:00:32,880
Super straightforward stuff.

19
00:00:32,880 --> 00:00:33,713
But what happens

20
00:00:33,713 --> 00:00:35,970
if I don't actually set
a default value for this?

21
00:00:35,970 --> 00:00:38,070
Let's say I set the
default value like this.

22
00:00:38,070 --> 00:00:39,480
Now I'm going to get some errors.

23
00:00:39,480 --> 00:00:40,350
And the reason for that is

24
00:00:40,350 --> 00:00:43,320
because my value is actually
implied as undefined

25
00:00:43,320 --> 00:00:45,780
and that's 'cause I never
passed it any type at all.

26
00:00:45,780 --> 00:00:48,390
So it's just assuming
my type is undefined.

27
00:00:48,390 --> 00:00:50,070
So you can see here when
I'm trying to pass a string

28
00:00:50,070 --> 00:00:51,780
to my setter, it's being
like, Hey, you can't do that.

29
00:00:51,780 --> 00:00:53,670
I expect this to be undefined.

30
00:00:53,670 --> 00:00:55,470
If you want to do this
where you don't pass

31
00:00:55,470 --> 00:00:56,580
in a default value,

32
00:00:56,580 --> 00:00:58,710
you need to use the generic
version of useState.

33
00:00:58,710 --> 00:00:59,970
So inside the angle brackets here

34
00:00:59,970 --> 00:01:01,860
you can pass what the
string type is going to be.

35
00:01:01,860 --> 00:01:02,820
'Cause we want this to be a string,

36
00:01:02,820 --> 00:01:04,560
we're gonna say the type is string.

37
00:01:04,560 --> 00:01:05,790
Now when I hover over my value,

38
00:01:05,790 --> 00:01:08,010
you can see the type
is string or undefined

39
00:01:08,010 --> 00:01:10,350
and that's just because by
default we pass nothing.

40
00:01:10,350 --> 00:01:12,900
So it's assuming my type
can include undefined

41
00:01:12,900 --> 00:01:13,980
and then it's also taken

42
00:01:13,980 --> 00:01:15,780
into account whatever I pass in here.

43
00:01:15,780 --> 00:01:17,580
You could manually define this like this,

44
00:01:17,580 --> 00:01:19,860
if you wanted to define it as undefined.

45
00:01:19,860 --> 00:01:21,720
That's going to give you
the exact same result.

46
00:01:21,720 --> 00:01:23,640
It's entirely up to you.

47
00:01:23,640 --> 00:01:24,960
It's just important to understand that

48
00:01:24,960 --> 00:01:27,030
if you pass nothing in
here, it's going to assume

49
00:01:27,030 --> 00:01:29,100
that your type can include undefined just

50
00:01:29,100 --> 00:01:30,810
'cause you're obviously
passing in undefined

51
00:01:30,810 --> 00:01:31,890
as your initial value.

52
00:01:31,890 --> 00:01:34,080
So if you're confused why you
passed in a type of string

53
00:01:34,080 --> 00:01:36,570
but the actual value has a
type that can be undefined

54
00:01:36,570 --> 00:01:38,700
or a string, that's the reason why.

55
00:01:38,700 --> 00:01:39,533
Another thing to take

56
00:01:39,533 --> 00:01:41,400
into account is what happens
if you pass in an array.

57
00:01:41,400 --> 00:01:43,320
For example, if I pass
in an array like this

58
00:01:43,320 --> 00:01:45,540
and I wanna be able to add a
value into this, for example,

59
00:01:45,540 --> 00:01:47,310
let's say that I wanted
to add a new array here

60
00:01:47,310 --> 00:01:48,960
which could be like one, two, three,

61
00:01:48,960 --> 00:01:51,540
you'll notice I'm immediately
getting an error from this.

62
00:01:51,540 --> 00:01:52,373
If I go to my value,

63
00:01:52,373 --> 00:01:54,900
you can see that's because
my array has a type of never.

64
00:01:54,900 --> 00:01:57,240
And that's because
essentially React has no idea

65
00:01:57,240 --> 00:01:58,073
what the type

66
00:01:58,073 --> 00:01:59,340
of this array is going to be.

67
00:01:59,340 --> 00:02:01,260
If I put some default
value inside of here,

68
00:02:01,260 --> 00:02:02,460
now it assumes,

69
00:02:02,460 --> 00:02:05,010
okay, I'm going to have
a value of a number array

70
00:02:05,010 --> 00:02:07,230
and now everything is
working perfectly fine.

71
00:02:07,230 --> 00:02:09,150
But it doesn't know that that's
what that's supposed to be.

72
00:02:09,150 --> 00:02:10,050
You can ignore this error.

73
00:02:10,050 --> 00:02:11,970
That's just 'cause I'm
using an input down here.

74
00:02:11,970 --> 00:02:14,040
So if for example, you
wanna pass it an empty array

75
00:02:14,040 --> 00:02:16,710
again I would just need to
type this as a number array

76
00:02:16,710 --> 00:02:19,020
and now everything is
going to work just fine.

77
00:02:19,020 --> 00:02:20,550
So really I find with useState

78
00:02:20,550 --> 00:02:22,560
if you're trying to pass
it something super generic

79
00:02:22,560 --> 00:02:24,870
as a default value or you're
trying to pass it nothing,

80
00:02:24,870 --> 00:02:26,760
you need to make sure you specify exactly

81
00:02:26,760 --> 00:02:28,230
what the type is going to be.

82
00:02:28,230 --> 00:02:30,150
Otherwise, if you're
passing it a default value

83
00:02:30,150 --> 00:02:30,983
that's pretty good.

84
00:02:30,983 --> 00:02:32,520
Like for example, you pass it a string,

85
00:02:32,520 --> 00:02:33,600
it's smart enough to infer

86
00:02:33,600 --> 00:02:35,670
that you can just leave
off the generic type.

87
00:02:35,670 --> 00:02:36,503
That's the really nice thing

88
00:02:36,503 --> 00:02:38,040
about React and TypeScript specifically.

89
00:02:38,040 --> 00:02:39,450
It's really good at inferring things

90
00:02:39,450 --> 00:02:41,880
and I try to let my TypeScript
infer as much as possible,

91
00:02:41,880 --> 00:02:43,740
because it makes me
have to write less types

92
00:02:43,740 --> 00:02:46,320
while still giving me the
same benefits of type safety.

93
00:02:46,320 --> 00:02:48,900
But oftentimes with useState,
you either pass it nothing

94
00:02:48,900 --> 00:02:51,570
as the default value, or maybe
you pass it an empty string

95
00:02:51,570 --> 00:02:53,400
or an empty object and
you need to make sure

96
00:02:53,400 --> 00:02:55,620
you actually type what
that value should be

97
00:02:55,620 --> 00:02:57,870
to make sure you get
the correct type safety.