1
00:00:00,820 --> 00:00:04,840
We've now got our first example of state being used inside of Iraq component.

2
00:00:04,840 --> 00:00:09,340
I want to very quickly go over a little lifecycle diagram and really explain what's going on inside

3
00:00:09,340 --> 00:00:11,080
of our application step by step.

4
00:00:11,140 --> 00:00:14,820
After that I'm going to show you a couple of special notes that you need to be aware of around state.

5
00:00:14,890 --> 00:00:17,540
And then we'll start to work on our second example to work with it.

6
00:00:17,560 --> 00:00:19,010
So let's get to it.

7
00:00:19,120 --> 00:00:23,920
So everything starts with our at first booting up at some point in time we then eventually navigate

8
00:00:23,920 --> 00:00:25,930
to our counter screen.

9
00:00:25,930 --> 00:00:31,300
It's only at that point time like when we actually navigate to that screen that our counter screen function

10
00:00:31,300 --> 00:00:34,830
runs for the very first time when that function runs for the first time.

11
00:00:34,870 --> 00:00:38,340
We then initialize our counter piece of state.

12
00:00:38,450 --> 00:00:40,680
It starts off with the default value of zero.

13
00:00:40,730 --> 00:00:45,610
And remember it is specifically zero because when we called you state we passed in a value of zero.

14
00:00:45,620 --> 00:00:46,290
Right there.

15
00:00:46,400 --> 00:00:53,450
That defines the starting value of counter then at some point in the future the user eventually taps

16
00:00:53,480 --> 00:00:58,580
on the increase button or maybe it's decrease either one and when that happens the on press callback

17
00:00:58,610 --> 00:00:59,960
is executed.

18
00:00:59,960 --> 00:01:05,960
So that's the on press callback that we passed as a prop right here inside that prop.

19
00:01:06,010 --> 00:01:11,830
We then make a call to set counter remember set counter is a function that we use to update the value

20
00:01:12,010 --> 00:01:13,450
of our state variable.

21
00:01:13,570 --> 00:01:18,540
React does not magically detect if you and I make a change manually to the counter variable.

22
00:01:18,580 --> 00:01:24,780
So the only way that we're ever going to update that variable is by calling that center function after

23
00:01:24,810 --> 00:01:30,300
a very brief pause after that and I say very brief pause right here because if you technically go back

24
00:01:30,300 --> 00:01:35,800
over here and do a console log of counter right after we update its value you're going to see that counter

25
00:01:35,800 --> 00:01:38,200
still has the exact same value.

26
00:01:38,280 --> 00:01:43,010
And the reason for that is that set counter doesn't technically update the value of counter right away.

27
00:01:43,110 --> 00:01:51,020
It happens at some point time shortly after that so after a very brief pause react then we'll automatically

28
00:01:51,080 --> 00:01:57,800
re render or essentially rerun our entire counter screen component that entire function gets invoked

29
00:01:57,890 --> 00:02:04,790
automatically a second time the second time it runs react knows that counter screen already was executed

30
00:02:04,790 --> 00:02:06,130
one time before.

31
00:02:06,130 --> 00:02:11,570
So the second time it runs that state variable of counter it doesn't get somehow magically initialized

32
00:02:11,570 --> 00:02:17,240
back to 0 a second time to react always knows if a component has been rendered already.

33
00:02:17,390 --> 00:02:22,660
The second time it gets re rendered it's not going to be initialized again the second time that counter

34
00:02:22,660 --> 00:02:28,080
screen is executed that value of counter is now going to have an updated value of one.

35
00:02:28,090 --> 00:02:31,190
So if we looked at the value of counter it would then be simply one.

36
00:02:31,450 --> 00:02:36,580
And so then inside of our JSA X block we can then reference that updated counter variable we can return

37
00:02:36,580 --> 00:02:42,070
it from inside of that j ust X block and see the value one print up on the screen.

38
00:02:42,160 --> 00:02:44,710
So that's what's going on behind the scenes.

39
00:02:44,710 --> 00:02:47,120
Now I want to give you just a couple of quick notes here.

40
00:02:47,170 --> 00:02:50,070
Some things you need to be aware of as we are using state.

41
00:02:50,080 --> 00:02:54,940
The first thing I want to mention is that right now we are using function based state inside of a functional

42
00:02:54,940 --> 00:02:56,230
component.

43
00:02:56,230 --> 00:03:02,270
In other words the component we created is an actual javascript function we can also create components

44
00:03:02,300 --> 00:03:08,240
out of JavaScript classes as well and inside of those other type of components we can use a very similar

45
00:03:08,240 --> 00:03:11,750
state system but the syntax bird is just a little different.

46
00:03:11,810 --> 00:03:15,860
We're going to eventually look at class based components later on but right now we're sticking with

47
00:03:15,860 --> 00:03:21,580
functional based components just because they're kind of scene has we're react as the library is headed

48
00:03:21,580 --> 00:03:24,730
towards in general the community is favoring functional components.

49
00:03:24,820 --> 00:03:27,670
That's why I'm concentrating on them so much inside this course.

50
00:03:27,670 --> 00:03:31,830
But you can also make use of class based components and you state with them as well.

51
00:03:31,880 --> 00:03:36,970
And as I mentioned we'll take a look at that later on now I just want to repeat that we're never going

52
00:03:36,970 --> 00:03:42,430
to modify directly a state variable so we're never going to write some code like that.

53
00:03:42,430 --> 00:03:48,040
We're never going to write out something like counter equals counter plus one we're never going to see

54
00:03:48,040 --> 00:03:51,040
counter on the left hand side of an equal sign.

55
00:03:51,130 --> 00:03:53,290
That's bad and we don't want to do it.

56
00:03:53,500 --> 00:03:58,590
Instead to update our state variable we are always going to use that setter function that we get back

57
00:03:58,600 --> 00:04:02,860
whenever we call that use state function.

58
00:04:02,860 --> 00:04:04,610
Next up we can name that state variable.

59
00:04:04,660 --> 00:04:10,130
Absolutely anything we wish we called it counter because it well made a lot of sense inside this example.

60
00:04:10,240 --> 00:04:16,750
We could have just as easily called it current account or my counter or whatever else you can call it

61
00:04:16,780 --> 00:04:22,380
anything you wish in general just like those prop names you just want to name your state variables something

62
00:04:22,380 --> 00:04:26,180
it makes sense to you and other developers.

63
00:04:26,190 --> 00:04:29,350
Next up we can track any kind of data that's going to change over time.

64
00:04:29,370 --> 00:04:32,340
So in this case we were tracking a number that changes.

65
00:04:32,490 --> 00:04:38,070
We could also track a string or an array of objects or just about anything else so we want to track

66
00:04:38,280 --> 00:04:39,600
using a state variable.

67
00:04:39,600 --> 00:04:42,910
It does not have to be a simple primitive value like a number or string.

68
00:04:42,930 --> 00:04:46,390
It could be more complex values as well.

69
00:04:46,420 --> 00:04:50,680
One thing I want to mention in passing here is that whenever our component gets re rendered because

70
00:04:50,680 --> 00:04:55,750
we update our state variable all of that components children will be rebranded as well.

71
00:04:55,750 --> 00:05:00,520
So remember we can nest a react component that we create inside of another.

72
00:05:00,520 --> 00:05:02,740
If we had done that for our counter screen right here.

73
00:05:02,770 --> 00:05:07,390
So if we had placed another component inside of here that you and I created and then we updated our

74
00:05:07,390 --> 00:05:13,850
state variable that would cause our child component to be re executed as well a second time.

75
00:05:13,900 --> 00:05:19,390
So using this state thing is a really easy way to get our entire application or parts of our application

76
00:05:19,720 --> 00:05:21,820
to automatically update at some point.

77
00:05:21,820 --> 00:05:29,070
Anytime our data changes and finally this is the kind of thing that makes state and prompts a little

78
00:05:29,070 --> 00:05:33,480
bit confusing a state variable can be passed down to a child component.

79
00:05:33,540 --> 00:05:40,960
So at that point in time that value is then kind of simultaneously a piece of state and a prop as well.

80
00:05:40,950 --> 00:05:45,210
And so this is where people start to get really confused on the difference between state and props.

81
00:05:45,220 --> 00:05:48,870
And we're going to be definitely looking at an example of this very shortly.

82
00:05:48,870 --> 00:05:51,740
So you can see exactly how it works all right.

83
00:05:51,740 --> 00:05:55,310
So last thing I want to mention here just very quickly this might sound a little bit confusing when

84
00:05:55,310 --> 00:05:56,990
I'd just use words to describe it.

85
00:05:57,020 --> 00:06:01,520
We're gonna see an example of this with some code as well but whenever we create an instance of counter

86
00:06:01,520 --> 00:06:07,250
screen in the words whenever we show counter screen on our device if we show multiple copies of it for

87
00:06:07,250 --> 00:06:13,640
some reason each separate copy of this component will have its own separate state variable.

88
00:06:13,650 --> 00:06:17,840
Now the reason that's relevant if you recall back inside of our components directory we created that

89
00:06:17,900 --> 00:06:24,470
image detail component right here and we showed multiple copies of this three to be precise.

90
00:06:24,470 --> 00:06:29,880
If we had added a state variable inside of here each of those three different copies of image does to

91
00:06:29,930 --> 00:06:35,390
detail that we had created would have its own separate and independent state variable.

92
00:06:35,450 --> 00:06:39,650
So essentially every time that we create an instance of a component we try to show it on the screen

93
00:06:40,040 --> 00:06:46,250
every copy of it has its own separate pieces of state and once again we're going to look at an example

94
00:06:46,250 --> 00:06:47,140
of that as well.

95
00:06:47,150 --> 00:06:51,200
I just want to mention it in passing right now in case you're curious OK.

96
00:06:51,270 --> 00:06:51,870
So that's it.

97
00:06:51,950 --> 00:06:53,670
Just some high level notes around state.

98
00:06:53,690 --> 00:06:55,150
So let's take another quick pause right here.

99
00:06:55,160 --> 00:06:59,120
When we come back the next video we're going to start to work on our next example using state.