1 00:00:01,080 --> 00:00:03,390 ‫We learned before that state 2 00:00:03,390 --> 00:00:06,510 ‫is the most important concept in React. 3 00:00:06,510 --> 00:00:10,170 ‫Therefore, managing state is the most important aspect 4 00:00:10,170 --> 00:00:13,200 ‫when it comes to thinking in React. 5 00:00:13,200 --> 00:00:14,550 ‫And so let's now talk 6 00:00:14,550 --> 00:00:18,573 ‫about the fundamentals of state management in React. 7 00:00:20,130 --> 00:00:24,120 ‫So as you already know, we can use the useState function 8 00:00:24,120 --> 00:00:28,260 ‫to create multiple pieces of state in order to track data 9 00:00:28,260 --> 00:00:31,920 ‫that changes over the life cycle of an application. 10 00:00:31,920 --> 00:00:34,650 ‫Here we have many examples of state 11 00:00:34,650 --> 00:00:38,010 ‫in the Udemy application that you are familiar with. 12 00:00:38,010 --> 00:00:40,230 ‫And if you want, you can pause the video 13 00:00:40,230 --> 00:00:42,660 ‫and quickly analyze this. 14 00:00:42,660 --> 00:00:47,550 ‫Now, all this looks like a bit of a mess, right? 15 00:00:47,550 --> 00:00:49,140 ‫Like how do we know 16 00:00:49,140 --> 00:00:52,350 ‫that we even need all of these pieces of state? 17 00:00:52,350 --> 00:00:55,410 ‫And how do we know where exactly to place them 18 00:00:55,410 --> 00:00:57,150 ‫inside the code? 19 00:00:57,150 --> 00:01:01,350 ‫Well, that's where state management comes into play. 20 00:01:01,350 --> 00:01:03,930 ‫Now, state management can be defined 21 00:01:03,930 --> 00:01:06,240 ‫in different ways by different people. 22 00:01:06,240 --> 00:01:08,790 ‫But I like to think of state management 23 00:01:08,790 --> 00:01:13,170 ‫as deciding when we need to create new pieces of state, 24 00:01:13,170 --> 00:01:15,450 ‫what types of state we need, 25 00:01:15,450 --> 00:01:19,950 ‫where to place each piece of state inside our code base, 26 00:01:19,950 --> 00:01:24,570 ‫and also how all the data should flow through the app. 27 00:01:24,570 --> 00:01:26,250 ‫And to summarize all this, 28 00:01:26,250 --> 00:01:29,370 ‫I like to use the analogy that state management 29 00:01:29,370 --> 00:01:32,490 ‫is basically giving each piece of state 30 00:01:32,490 --> 00:01:35,550 ‫a home within our code base. 31 00:01:35,550 --> 00:01:38,640 ‫Now, up until this point, in our small apps, 32 00:01:38,640 --> 00:01:41,940 ‫we never had to worry about state management at all. 33 00:01:41,940 --> 00:01:43,890 ‫We simply placed each state 34 00:01:43,890 --> 00:01:47,340 ‫in a component that needed it and that's it. 35 00:01:47,340 --> 00:01:51,360 ‫But as an application grows, the need to find the right home 36 00:01:51,360 --> 00:01:55,200 ‫for each piece of state start to become really important, 37 00:01:55,200 --> 00:01:57,600 ‫no matter if that home is the component 38 00:01:57,600 --> 00:02:00,000 ‫where we first need that state, 39 00:02:00,000 --> 00:02:03,333 ‫some parent component or even global state. 40 00:02:04,620 --> 00:02:06,960 ‫And speaking of global state, 41 00:02:06,960 --> 00:02:09,240 ‫let's actually analyze the difference 42 00:02:09,240 --> 00:02:13,950 ‫between the big two types of state that exist in React, 43 00:02:13,950 --> 00:02:17,220 ‫global state and local state. 44 00:02:17,220 --> 00:02:20,880 ‫Now, this will only become more important to us later on, 45 00:02:20,880 --> 00:02:23,370 ‫but let's still start learning about this 46 00:02:23,370 --> 00:02:27,300 ‫inside this Thinking About State section. 47 00:02:27,300 --> 00:02:30,000 ‫So in React, each piece of state 48 00:02:30,000 --> 00:02:33,900 ‫is either local state or global state. 49 00:02:33,900 --> 00:02:38,760 ‫So local state is state that is only needed in one component 50 00:02:38,760 --> 00:02:41,010 ‫or any few different components, 51 00:02:41,010 --> 00:02:44,070 ‫like child or sibling components. 52 00:02:44,070 --> 00:02:46,770 ‫We simply create a piece of local state 53 00:02:46,770 --> 00:02:50,640 ‫using the useState function inside a certain component. 54 00:02:50,640 --> 00:02:53,880 ‫And that piece of state is then only accessible 55 00:02:53,880 --> 00:02:58,080 ‫to that exact component and maybe to its child components 56 00:02:58,080 --> 00:03:00,363 ‫if we pass the state using props. 57 00:03:01,260 --> 00:03:03,780 ‫Now going back to our Udemy app, 58 00:03:03,780 --> 00:03:05,400 ‫an example of local state 59 00:03:05,400 --> 00:03:08,820 ‫might be the input text in the search bar. 60 00:03:08,820 --> 00:03:10,830 ‫So probably only that component 61 00:03:10,830 --> 00:03:12,960 ‫needs to know about this data. 62 00:03:12,960 --> 00:03:15,450 ‫And therefore, this is local state, 63 00:03:15,450 --> 00:03:19,770 ‫so state local to that search bar component. 64 00:03:19,770 --> 00:03:21,600 ‫Now about global state, 65 00:03:21,600 --> 00:03:24,090 ‫this is state that many different components 66 00:03:24,090 --> 00:03:27,180 ‫in the app might need access to. 67 00:03:27,180 --> 00:03:30,600 ‫Therefore, when we define state as being global, 68 00:03:30,600 --> 00:03:33,210 ‫that piece of state will become accessible 69 00:03:33,210 --> 00:03:36,960 ‫to every single component in the entire app. 70 00:03:36,960 --> 00:03:39,360 ‫It's shared between all components, 71 00:03:39,360 --> 00:03:43,590 ‫and therefore, we can also call this shared state. 72 00:03:43,590 --> 00:03:45,960 ‫In practice, we can define global state 73 00:03:45,960 --> 00:03:48,450 ‫using React's Context API 74 00:03:48,450 --> 00:03:52,020 ‫or also an external global state management library 75 00:03:52,020 --> 00:03:54,543 ‫like Redux that you might have heard of. 76 00:03:55,530 --> 00:03:57,480 ‫Now, in this Udemy app, 77 00:03:57,480 --> 00:04:01,290 ‫one piece of global state is the shopping cart. 78 00:04:01,290 --> 00:04:05,460 ‫So that piece of data is used all over the place here. 79 00:04:05,460 --> 00:04:07,770 ‫So all these components need access 80 00:04:07,770 --> 00:04:09,840 ‫to the shopping cart state, 81 00:04:09,840 --> 00:04:13,713 ‫and therefore, it makes sense that this is global state. 82 00:04:14,550 --> 00:04:16,770 ‫Now, this distinction between local 83 00:04:16,770 --> 00:04:21,180 ‫and global state will matter more in large applications. 84 00:04:21,180 --> 00:04:23,610 ‫So in the app we're building right now, 85 00:04:23,610 --> 00:04:26,640 ‫we won't have any truly global state, 86 00:04:26,640 --> 00:04:29,790 ‫and we're actually gonna keep using just local state, 87 00:04:29,790 --> 00:04:33,270 ‫doing parts one and two of this course. 88 00:04:33,270 --> 00:04:37,200 ‫And in fact, one important guideline in state management 89 00:04:37,200 --> 00:04:40,110 ‫is to always start with local state 90 00:04:40,110 --> 00:04:44,460 ‫and only move to global state if you really truly need it. 91 00:04:44,460 --> 00:04:46,230 ‫And we will learn all about this 92 00:04:46,230 --> 00:04:49,530 ‫in part three and four of the course. 93 00:04:49,530 --> 00:04:52,830 ‫But for now, let's take a look at how to decide 94 00:04:52,830 --> 00:04:56,853 ‫when we actually need state and where we should place it. 95 00:04:58,170 --> 00:05:01,140 ‫So this slide will basically be a flow chart 96 00:05:01,140 --> 00:05:03,780 ‫that will help you take those decisions, 97 00:05:03,780 --> 00:05:07,983 ‫so again, about when to create state and where to place it. 98 00:05:08,970 --> 00:05:11,760 ‫So it all starts with you realizing 99 00:05:11,760 --> 00:05:14,640 ‫that you need to store some data. 100 00:05:14,640 --> 00:05:18,330 ‫Now when this happens, the first question to ask is, 101 00:05:18,330 --> 00:05:22,110 ‫will this data change at some point in time? 102 00:05:22,110 --> 00:05:24,150 ‫And if the answer is no, 103 00:05:24,150 --> 00:05:27,210 ‫then all you need is a regular variable, 104 00:05:27,210 --> 00:05:29,880 ‫so probably a const variable. 105 00:05:29,880 --> 00:05:33,660 ‫However, if the data does need to change in the future, 106 00:05:33,660 --> 00:05:37,650 ‫the next question is, it is possible to compute 107 00:05:37,650 --> 00:05:40,170 ‫or to calculate this new data 108 00:05:40,170 --> 00:05:43,410 ‫from an existing piece of state or props? 109 00:05:43,410 --> 00:05:47,100 ‫If that's the case, then you should derive the state. 110 00:05:47,100 --> 00:05:48,720 ‫So basically calculate it 111 00:05:48,720 --> 00:05:52,530 ‫based on an already existing state or prop. 112 00:05:52,530 --> 00:05:54,660 ‫And this is a pretty important concept, 113 00:05:54,660 --> 00:05:56,310 ‫so there is a separate lecture 114 00:05:56,310 --> 00:05:59,850 ‫on derived state later in the section. 115 00:05:59,850 --> 00:06:03,600 ‫However, most of the time you cannot derive state. 116 00:06:03,600 --> 00:06:06,330 ‫And so in that case, you need to ask yourself 117 00:06:06,330 --> 00:06:10,620 ‫whether updating the state should re-render the component. 118 00:06:10,620 --> 00:06:14,070 ‫Now, we have already learned before that updating state 119 00:06:14,070 --> 00:06:16,380 ‫always re-renders a component, 120 00:06:16,380 --> 00:06:19,110 ‫but there is actually something called a Ref 121 00:06:19,110 --> 00:06:23,040 ‫which persists data over time like regular state, 122 00:06:23,040 --> 00:06:26,100 ‫but does not re-render a component. 123 00:06:26,100 --> 00:06:28,890 ‫So it's basically a special type of state 124 00:06:28,890 --> 00:06:31,050 ‫that we will look at later. 125 00:06:31,050 --> 00:06:34,590 ‫Now, most of the time you actually do want state 126 00:06:34,590 --> 00:06:36,510 ‫to re-render the component. 127 00:06:36,510 --> 00:06:39,930 ‫And so what you do is to create a new piece of state 128 00:06:39,930 --> 00:06:42,150 ‫using the useState function, 129 00:06:42,150 --> 00:06:44,790 ‫and you then place that new piece of state 130 00:06:44,790 --> 00:06:47,910 ‫into the component that you are currently building. 131 00:06:47,910 --> 00:06:52,110 ‫And so that's the always start with local state guideline 132 00:06:52,110 --> 00:06:55,230 ‫that we talked about in the previous slide. 133 00:06:55,230 --> 00:06:57,270 ‫And with this, we have completed 134 00:06:57,270 --> 00:07:00,453 ‫the decision process of when to create state. 135 00:07:01,350 --> 00:07:03,900 ‫So again, most of the time you will just create 136 00:07:03,900 --> 00:07:06,720 ‫a new piece of state using the useState Hook, 137 00:07:06,720 --> 00:07:09,240 ‫but there are also all these other cases. 138 00:07:09,240 --> 00:07:11,460 ‫And so it's important that you are aware 139 00:07:11,460 --> 00:07:14,043 ‫of when to create each of them. 140 00:07:14,880 --> 00:07:16,830 ‫But anyway, let's now focus 141 00:07:16,830 --> 00:07:20,013 ‫on where to place each new piece of state. 142 00:07:20,940 --> 00:07:24,120 ‫So if the state variable that we just created 143 00:07:24,120 --> 00:07:27,150 ‫is only used by the current component, 144 00:07:27,150 --> 00:07:31,260 ‫then simply leave it in that component, and you're done. 145 00:07:31,260 --> 00:07:34,710 ‫So that's the end of the process right there. 146 00:07:34,710 --> 00:07:38,040 ‫However, the state variable might also be necessary 147 00:07:38,040 --> 00:07:39,840 ‫for a child component. 148 00:07:39,840 --> 00:07:43,080 ‫And in that case, simply pass the state down 149 00:07:43,080 --> 00:07:45,960 ‫into the child component by using props. 150 00:07:45,960 --> 00:07:48,570 ‫So easy enough, right? 151 00:07:48,570 --> 00:07:51,690 ‫Now, if the state variable is also necessary 152 00:07:51,690 --> 00:07:54,750 ‫for one or a few sibling components 153 00:07:54,750 --> 00:07:58,650 ‫or even for a parent component of your current component, 154 00:07:58,650 --> 00:08:00,720 ‫it's time to move that state 155 00:08:00,720 --> 00:08:03,480 ‫to the first common parent component. 156 00:08:03,480 --> 00:08:08,430 ‫And in React, this is what we call lifting state up. 157 00:08:08,430 --> 00:08:12,360 ‫And this is another one of those super important topics 158 00:08:12,360 --> 00:08:15,210 ‫which we will actually start using in practice 159 00:08:15,210 --> 00:08:16,950 ‫in the next video. 160 00:08:16,950 --> 00:08:20,070 ‫Now finally, the state variable might be needed 161 00:08:20,070 --> 00:08:23,250 ‫in even more than just a few siblings, 162 00:08:23,250 --> 00:08:24,630 ‫so it might be necessary 163 00:08:24,630 --> 00:08:27,900 ‫all over the place in the componentry. 164 00:08:27,900 --> 00:08:30,990 ‫And what does that sound like to you? 165 00:08:30,990 --> 00:08:35,580 ‫Well, that's right, that sounds just like global state. 166 00:08:35,580 --> 00:08:38,790 ‫But since we won't need global state for some time, 167 00:08:38,790 --> 00:08:41,340 ‫we will complete this diagram once we reach 168 00:08:41,340 --> 00:08:44,400 ‫the global state management lectures. 169 00:08:44,400 --> 00:08:48,060 ‫All right, so I hope that this diagram will be useful 170 00:08:48,060 --> 00:08:50,670 ‫once you start building your own small apps 171 00:08:50,670 --> 00:08:53,700 ‫or even throughout the rest of the course. 172 00:08:53,700 --> 00:08:56,760 ‫Now, I know that this look super confusing 173 00:08:56,760 --> 00:08:59,340 ‫and like a lot of work for now, 174 00:08:59,340 --> 00:09:02,610 ‫but it will become really intuitive over time. 175 00:09:02,610 --> 00:09:05,460 ‫So at some point, you will just automatically 176 00:09:05,460 --> 00:09:09,360 ‫and intuitively know when to create a piece of state, 177 00:09:09,360 --> 00:09:13,380 ‫you will know when to derive state from existing state, 178 00:09:13,380 --> 00:09:17,310 ‫and you will intuitively know when to lift state up. 179 00:09:17,310 --> 00:09:20,040 ‫But this flow chart can still be quite helpful 180 00:09:20,040 --> 00:09:20,973 ‫in the beginning.