1
00:00:01,080 --> 00:00:03,780
‫So we learned how to use event handlers,

2
00:00:03,780 --> 00:00:04,980
‫but, now, we want them

3
00:00:04,980 --> 00:00:08,580
‫to actually do something useful, right?

4
00:00:08,580 --> 00:00:11,400
‫So we want to make the component interactive.

5
00:00:11,400 --> 00:00:12,360
‫And for that,

6
00:00:12,360 --> 00:00:15,513
‫as I have mentioned already, we need state.

7
00:00:16,890 --> 00:00:18,660
‫Now, without a doubt,

8
00:00:18,660 --> 00:00:22,530
‫state is the most important concept in React.

9
00:00:22,530 --> 00:00:27,120
‫So everything basically revolves around state in React.

10
00:00:27,120 --> 00:00:29,730
‫And, so we will keep learning about state

11
00:00:29,730 --> 00:00:32,250
‫throughout the entire course.

12
00:00:32,250 --> 00:00:34,830
‫Therefore, let's start with an overview

13
00:00:34,830 --> 00:00:37,590
‫of what exactly you will learn about state

14
00:00:37,590 --> 00:00:40,140
‫while going through this course.

15
00:00:40,140 --> 00:00:43,380
‫First, we will learn what state actually is,

16
00:00:43,380 --> 00:00:46,080
‫what it does, and why we need it,

17
00:00:46,080 --> 00:00:49,710
‫which is what this section is all about.

18
00:00:49,710 --> 00:00:53,850
‫Then, we need to learn how to actually use state in practice

19
00:00:53,850 --> 00:00:57,270
‫using the useState or useReducer hooks,

20
00:00:57,270 --> 00:01:02,250
‫the Context API, or even external tools like Redux.

21
00:01:02,250 --> 00:01:04,500
‫We will also need to deeply understand

22
00:01:04,500 --> 00:01:07,320
‫how to think about state in React.

23
00:01:07,320 --> 00:01:11,040
‫And, so these are topics for future sections.

24
00:01:11,040 --> 00:01:13,320
‫Okay, and with this out of the way,

25
00:01:13,320 --> 00:01:16,683
‫we're now ready to learn what state actually is.

26
00:01:18,210 --> 00:01:19,260
‫So, we have learned

27
00:01:19,260 --> 00:01:23,460
‫how to pass data into a component by using props,

28
00:01:23,460 --> 00:01:25,380
‫which, remember, is data

29
00:01:25,380 --> 00:01:28,800
‫that's coming from outside the component.

30
00:01:28,800 --> 00:01:33,330
‫But what if a component needs to actually hold its own data,

31
00:01:33,330 --> 00:01:35,940
‫and also hold it over time?

32
00:01:35,940 --> 00:01:40,170
‫Also, what if we actually want to make our app interactive

33
00:01:40,170 --> 00:01:43,650
‫changing the UI as a result of an action?

34
00:01:43,650 --> 00:01:48,360
‫Well, that's where, finally, state comes into play.

35
00:01:48,360 --> 00:01:50,820
‫So state is basically data

36
00:01:50,820 --> 00:01:53,700
‫that a component can hold over time,

37
00:01:53,700 --> 00:01:55,740
‫and we use it for information

38
00:01:55,740 --> 00:02:00,120
‫that a component needs to remember throughout its lifecycle.

39
00:02:00,120 --> 00:02:02,310
‫Therefore, we can think of state

40
00:02:02,310 --> 00:02:05,250
‫as being the memory of a component.

41
00:02:05,250 --> 00:02:08,760
‫So that can be quite a helpful analogy I think.

42
00:02:08,760 --> 00:02:12,060
‫Now, examples of state can be simple things

43
00:02:12,060 --> 00:02:14,340
‫like a notification count,

44
00:02:14,340 --> 00:02:17,010
‫the text content of an input field,

45
00:02:17,010 --> 00:02:20,460
‫or the active tab in a tab component.

46
00:02:20,460 --> 00:02:23,100
‫It can also be a bit more complex data,

47
00:02:23,100 --> 00:02:26,700
‫for example, the content of a shopping cart.

48
00:02:26,700 --> 00:02:29,730
‫Now, what all these pieces of state have in common

49
00:02:29,730 --> 00:02:31,410
‫is that in the application,

50
00:02:31,410 --> 00:02:34,440
‫the user can easily change these values.

51
00:02:34,440 --> 00:02:36,900
‫For example, when they read a notification,

52
00:02:36,900 --> 00:02:39,240
‫the count will go down by one,

53
00:02:39,240 --> 00:02:41,400
‫or when they click on another tab,

54
00:02:41,400 --> 00:02:43,860
‫that tab will become active.

55
00:02:43,860 --> 00:02:46,170
‫And, therefore, each of these components

56
00:02:46,170 --> 00:02:49,860
‫needs to be able to hold this data over time,

57
00:02:49,860 --> 00:02:53,100
‫so over the lifecycle of the application.

58
00:02:53,100 --> 00:02:54,720
‫And for that reason,

59
00:02:54,720 --> 00:02:59,460
‫each of these pieces of information is a piece of state.

60
00:02:59,460 --> 00:03:03,240
‫And notice how I use the term piece of state here,

61
00:03:03,240 --> 00:03:06,030
‫because just the term state itself

62
00:03:06,030 --> 00:03:08,430
‫is more of a general term.

63
00:03:08,430 --> 00:03:11,730
‫So a piece of state, or a state variable,

64
00:03:11,730 --> 00:03:15,840
‫is just one single actual variable in the component

65
00:03:15,840 --> 00:03:18,300
‫that we can define in our code.

66
00:03:18,300 --> 00:03:19,350
‫On the other hand,

67
00:03:19,350 --> 00:03:23,310
‫the term state itself is more about the entire state

68
00:03:23,310 --> 00:03:25,380
‫that the component is in,

69
00:03:25,380 --> 00:03:29,520
‫like the entire condition at a certain point in time.

70
00:03:29,520 --> 00:03:32,010
‫So, basically, the general term state

71
00:03:32,010 --> 00:03:35,250
‫is all the pieces of state together.

72
00:03:35,250 --> 00:03:38,400
‫And if this sounds confusing, don't worry,

73
00:03:38,400 --> 00:03:42,180
‫these are just some minor differences in terminology.

74
00:03:42,180 --> 00:03:45,390
‫In practice, we usually use the terms state,

75
00:03:45,390 --> 00:03:49,920
‫piece of state, and state variable quite interchangeably.

76
00:03:49,920 --> 00:03:52,170
‫But anyway, let's now move on

77
00:03:52,170 --> 00:03:55,050
‫to the most important aspect of state,

78
00:03:55,050 --> 00:03:59,190
‫which is the fact that updating state triggers React

79
00:03:59,190 --> 00:04:01,950
‫to re-render the component.

80
00:04:01,950 --> 00:04:04,680
‫So, again, whenever we update

81
00:04:04,680 --> 00:04:06,990
‫a piece of state in a component,

82
00:04:06,990 --> 00:04:10,050
‫this will make React re-render that component

83
00:04:10,050 --> 00:04:11,880
‫in the user interface.

84
00:04:11,880 --> 00:04:16,440
‫So it will create a new updated view for that component.

85
00:04:16,440 --> 00:04:20,130
‫And a component's view is basically just the component

86
00:04:20,130 --> 00:04:22,440
‫visually rendered on the screen,

87
00:04:22,440 --> 00:04:24,900
‫so in the user interface.

88
00:04:24,900 --> 00:04:26,370
‫Now, up until this point,

89
00:04:26,370 --> 00:04:30,690
‫I have always just used the generic term user interface,

90
00:04:30,690 --> 00:04:34,710
‫but now, we are actually talking about a single component.

91
00:04:34,710 --> 00:04:37,410
‫And when one single component is rendered,

92
00:04:37,410 --> 00:04:39,300
‫we call that a view.

93
00:04:39,300 --> 00:04:41,850
‫And, so all the views combined together

94
00:04:41,850 --> 00:04:45,390
‫then make up the final user interface.

95
00:04:45,390 --> 00:04:48,330
‫Now, do you remember this small diagram

96
00:04:48,330 --> 00:04:50,970
‫that we saw right at the beginning of the course

97
00:04:50,970 --> 00:04:53,760
‫when we first talked about how React

98
00:04:53,760 --> 00:04:56,763
‫automatically keeps data in sync with the UI?

99
00:04:57,720 --> 00:05:01,680
‫Well, state is how React does that.

100
00:05:01,680 --> 00:05:04,920
‫So state is how React keeps the user interface

101
00:05:04,920 --> 00:05:06,870
‫in sync with data.

102
00:05:06,870 --> 00:05:10,590
‫We change the state, we change the UI.

103
00:05:10,590 --> 00:05:14,160
‫So, summarizing, state allows developers

104
00:05:14,160 --> 00:05:16,680
‫to do two important things.

105
00:05:16,680 --> 00:05:20,340
‫First, state allows us to update the component's view

106
00:05:20,340 --> 00:05:22,650
‫by re-rendering the component.

107
00:05:22,650 --> 00:05:26,580
‫So it gives us a way to change part of the UI.

108
00:05:26,580 --> 00:05:30,810
‫Second, state allows developers to persist local variables

109
00:05:30,810 --> 00:05:34,650
‫between multiple renders and re-renders.

110
00:05:34,650 --> 00:05:38,850
‫So, if you think about this, state is basically a tool.

111
00:05:38,850 --> 00:05:41,820
‫And, in fact, it's the most powerful tool

112
00:05:41,820 --> 00:05:44,580
‫that we have in the world of React.

113
00:05:44,580 --> 00:05:48,510
‫So, understanding how a state works and what it does,

114
00:05:48,510 --> 00:05:50,940
‫so understanding the mechanics of state,

115
00:05:50,940 --> 00:05:54,870
‫will unlock the power of React development for you.

116
00:05:54,870 --> 00:05:58,530
‫But, before we go understand the mechanics of state,

117
00:05:58,530 --> 00:06:01,110
‫let's actually first go back to our code

118
00:06:01,110 --> 00:06:05,163
‫and use this powerful tool in practice for the first time.