1
00:00:01,080 --> 00:00:04,110
‫As we finish this first dive into state,

2
00:00:04,110 --> 00:00:06,810
‫I want to share a few more important thoughts,

3
00:00:06,810 --> 00:00:11,373
‫or ideas, about state, as well as some practical guidelines.

4
00:00:13,440 --> 00:00:14,790
‫So, first of all,

5
00:00:14,790 --> 00:00:17,130
‫there is one important technical detail

6
00:00:17,130 --> 00:00:21,150
‫that you should be aware of, and this might seem obvious

7
00:00:21,150 --> 00:00:23,400
‫but it's still worth mentioning.

8
00:00:23,400 --> 00:00:25,050
‫So, what I'm talking about

9
00:00:25,050 --> 00:00:27,450
‫is the fact that each component

10
00:00:27,450 --> 00:00:31,410
‫really has, and manages, its own state.

11
00:00:31,410 --> 00:00:35,220
‫So, even if we render the same component multiple times

12
00:00:35,220 --> 00:00:39,060
‫on one page, each of these component instances

13
00:00:39,060 --> 00:00:42,960
‫will operate independently from all the other ones.

14
00:00:42,960 --> 00:00:46,290
‫So, in this example, the three counter components

15
00:00:46,290 --> 00:00:49,740
‫all start with a piece of state called "Score,"

16
00:00:49,740 --> 00:00:52,710
‫which is set initially to zero.

17
00:00:52,710 --> 00:00:55,800
‫Then, if one of the buttons is clicked,

18
00:00:55,800 --> 00:00:59,340
‫that increases the score by one for each click,

19
00:00:59,340 --> 00:01:02,250
‫but only in that component.

20
00:01:02,250 --> 00:01:06,210
‫The state in all the other components stays the same.

21
00:01:06,210 --> 00:01:10,320
‫So, again, if we change the state in one of the components,

22
00:01:10,320 --> 00:01:13,830
‫that won't affect the other components at all.

23
00:01:13,830 --> 00:01:15,600
‫And so, the same thing, of course,

24
00:01:15,600 --> 00:01:19,560
‫is going to happen when we click one of the other buttons,

25
00:01:19,560 --> 00:01:22,860
‫or even when one of the components is removed

26
00:01:22,860 --> 00:01:25,260
‫from the UI entirely.

27
00:01:25,260 --> 00:01:29,673
‫So, state really is isolated inside of each component.

28
00:01:30,780 --> 00:01:33,750
‫Now, if we analyze everything that we just learned

29
00:01:33,750 --> 00:01:36,630
‫about state, we can come to the conclusion

30
00:01:36,630 --> 00:01:40,770
‫that we can basically think of the entire application view,

31
00:01:40,770 --> 00:01:45,770
‫so, the entire user interface, as a function of state.

32
00:01:45,930 --> 00:01:48,600
‫Or, in other words, the entire UI

33
00:01:48,600 --> 00:01:52,440
‫is always a representation of all the current states

34
00:01:52,440 --> 00:01:54,720
‫in all components.

35
00:01:54,720 --> 00:01:58,020
‫And, taking this idea even one step further,

36
00:01:58,020 --> 00:02:01,410
‫a React application is fundamentally all about

37
00:02:01,410 --> 00:02:04,560
‫changing state over time, and of course,

38
00:02:04,560 --> 00:02:08,940
‫also, correctly displaying that state at all times.

39
00:02:08,940 --> 00:02:12,150
‫And this is really what the declarative approach

40
00:02:12,150 --> 00:02:16,080
‫to building user interfaces is all about.

41
00:02:16,080 --> 00:02:20,820
‫So, instead of viewing a UI as explicit DOM manipulations,

42
00:02:20,820 --> 00:02:23,550
‫with state, we now view a UI

43
00:02:23,550 --> 00:02:27,420
‫as a reflection of data changing over time.

44
00:02:27,420 --> 00:02:30,060
‫And, as you know by now, we describe

45
00:02:30,060 --> 00:02:32,880
‫that reflection of data using state,

46
00:02:32,880 --> 00:02:35,790
‫event handlers, and JSX.

47
00:02:35,790 --> 00:02:40,260
‫So, we describe the UI, React does the rest.

48
00:02:40,260 --> 00:02:42,180
‫Now, this might all sound a bit

49
00:02:42,180 --> 00:02:44,850
‫philosophical at this point in your journey,

50
00:02:44,850 --> 00:02:48,090
‫but trust me, as you become more and more experienced

51
00:02:48,090 --> 00:02:51,690
‫in building React apps and working with state,

52
00:02:51,690 --> 00:02:54,810
‫you will truly and deeply understand everything

53
00:02:54,810 --> 00:02:55,923
‫I just said here.

54
00:02:57,360 --> 00:02:59,580
‫Now, okay, and now to finish,

55
00:02:59,580 --> 00:03:01,740
‫let me give you a few guidelines

56
00:03:01,740 --> 00:03:04,680
‫on how to use state in practice.

57
00:03:04,680 --> 00:03:07,080
‫So, practical guidelines is always

58
00:03:07,080 --> 00:03:08,940
‫what students like the most,

59
00:03:08,940 --> 00:03:12,450
‫and here, this also kind of serves as a summary

60
00:03:12,450 --> 00:03:14,550
‫of state in general.

61
00:03:14,550 --> 00:03:18,240
‫And these guidelines are for you to keep as a reference,

62
00:03:18,240 --> 00:03:20,400
‫so, there is a lot of text here

63
00:03:20,400 --> 00:03:23,160
‫that I will just quickly go over now.

64
00:03:23,160 --> 00:03:25,530
‫So, first of all, you should create

65
00:03:25,530 --> 00:03:28,200
‫a new state variable for any data

66
00:03:28,200 --> 00:03:31,920
‫that a component should keep track of over time.

67
00:03:31,920 --> 00:03:34,470
‫And the easy way of figuring this out

68
00:03:34,470 --> 00:03:37,440
‫is to think of variables that need to change

69
00:03:37,440 --> 00:03:39,960
‫at some point in the future.

70
00:03:39,960 --> 00:03:43,740
‫So, if you're used to building apps in Vanilla JavaScript,

71
00:03:43,740 --> 00:03:45,690
‫those would be variables defined

72
00:03:45,690 --> 00:03:50,550
‫with "let" or with "var," or also an array, or object,

73
00:03:50,550 --> 00:03:54,180
‫that you mutate over the applications lifecycle.

74
00:03:54,180 --> 00:03:57,870
‫So, in React, you use state for those.

75
00:03:57,870 --> 00:04:02,280
‫Another way of figuring out when you need state is this.

76
00:04:02,280 --> 00:04:04,530
‫Whenever you want something in a component

77
00:04:04,530 --> 00:04:07,290
‫to be dynamic, create a piece of state

78
00:04:07,290 --> 00:04:11,070
‫related to that "thing," and then update the state

79
00:04:11,070 --> 00:04:13,470
‫when the "thing" should change,

80
00:04:13,470 --> 00:04:17,280
‫or, in other words, when you need it to be dynamic.

81
00:04:17,280 --> 00:04:20,790
‫Now, since this "thing" is a bit abstract,

82
00:04:20,790 --> 00:04:23,280
‫let's think of a modal window

83
00:04:23,280 --> 00:04:26,430
‫that can be either open or closed.

84
00:04:26,430 --> 00:04:29,940
‫So, for a modal window, we can create a state variable

85
00:04:29,940 --> 00:04:32,910
‫called, "isOpen," that will keep track

86
00:04:32,910 --> 00:04:37,170
‫of whether the model is currently open or not.

87
00:04:37,170 --> 00:04:40,860
‫Then, when "isOpen" is true, we display the window

88
00:04:40,860 --> 00:04:44,280
‫on the screen, and if it's false, we hide it.

89
00:04:44,280 --> 00:04:46,230
‫Simple, right?

90
00:04:46,230 --> 00:04:48,120
‫So, whenever you want to change

91
00:04:48,120 --> 00:04:50,430
‫the way a component looks like,

92
00:04:50,430 --> 00:04:52,440
‫or the data that it displays,

93
00:04:52,440 --> 00:04:55,590
‫just update its state, which you usually do

94
00:04:55,590 --> 00:04:58,530
‫inside an event handler function.

95
00:04:58,530 --> 00:05:01,620
‫Now, when you're actually building your components,

96
00:05:01,620 --> 00:05:05,880
‫it's gonna be useful to always imagine the components view,

97
00:05:05,880 --> 00:05:09,540
‫so the component rendered on the screen, as a reflection

98
00:05:09,540 --> 00:05:12,663
‫of state changing and evolving over time.

99
00:05:13,680 --> 00:05:16,200
‫Finally, there is one common mistake

100
00:05:16,200 --> 00:05:19,740
‫that many beginners make, which is to use state

101
00:05:19,740 --> 00:05:23,820
‫for every single variable that you need in a component,

102
00:05:23,820 --> 00:05:26,280
‫but that's really not necessary.

103
00:05:26,280 --> 00:05:29,160
‫So, do not use state for variables

104
00:05:29,160 --> 00:05:32,670
‫that should not trigger a re-render, okay?

105
00:05:32,670 --> 00:05:36,030
‫Because that will just cause unnecessary re-renders

106
00:05:36,030 --> 00:05:38,670
‫which can cause performance issues.

107
00:05:38,670 --> 00:05:40,170
‫So, it's very common to need

108
00:05:40,170 --> 00:05:42,870
‫some variables that are not state.

109
00:05:42,870 --> 00:05:44,700
‫And so for those, you can just use

110
00:05:44,700 --> 00:05:47,670
‫regular variables defined with "const."

111
00:05:47,670 --> 00:05:50,523
‫But, we will come back to this in the next section.

112
00:05:51,390 --> 00:05:54,540
‫All right, so this is my first set of guidelines

113
00:05:54,540 --> 00:05:58,740
‫about state, which should be more than enough for now.

114
00:05:58,740 --> 00:06:01,170
‫So, if you truly internalize these,

115
00:06:01,170 --> 00:06:03,900
‫then building React applications in the future

116
00:06:03,900 --> 00:06:06,510
‫should be a lot easier for you.

117
00:06:06,510 --> 00:06:09,300
‫And, I say this because I really believe

118
00:06:09,300 --> 00:06:13,020
‫that mastering state is the most difficult part

119
00:06:13,020 --> 00:06:16,650
‫of learning React, but once you overcome this hurdle

120
00:06:16,650 --> 00:06:19,680
‫and truly internalize when you need state

121
00:06:19,680 --> 00:06:21,300
‫and how it all works,

122
00:06:21,300 --> 00:06:24,510
‫it will unlock React development for you.

123
00:06:24,510 --> 00:06:27,630
‫And so, that's why I spent so much time here

124
00:06:27,630 --> 00:06:29,733
‫showing you how state works.