1 00:00:01,110 --> 00:00:04,740 ‫So now that we know how the Context API works, 2 00:00:04,740 --> 00:00:06,150 ‫it's time to get back 3 00:00:06,150 --> 00:00:09,090 ‫to talking about state management in general 4 00:00:09,090 --> 00:00:13,530 ‫and how the Context API fits into the state management tools 5 00:00:13,530 --> 00:00:15,183 ‫that we already had before. 6 00:00:16,860 --> 00:00:19,620 ‫Now we already talked about state management 7 00:00:19,620 --> 00:00:21,150 ‫earlier in the course 8 00:00:21,150 --> 00:00:23,820 ‫but it was more of an introduction. 9 00:00:23,820 --> 00:00:27,480 ‫So back then, I told you that state management 10 00:00:27,480 --> 00:00:30,990 ‫is basically just like giving each piece of state 11 00:00:30,990 --> 00:00:33,690 ‫the right home, right? 12 00:00:33,690 --> 00:00:38,280 ‫So in that lecture, we talked about when to use state, 13 00:00:38,280 --> 00:00:40,560 ‫local versus global state 14 00:00:40,560 --> 00:00:43,500 ‫and I also gave you this handy flowchart 15 00:00:43,500 --> 00:00:46,740 ‫to decide when and where to create state 16 00:00:46,740 --> 00:00:50,130 ‫which of course you can keep using. 17 00:00:50,130 --> 00:00:53,400 ‫Now in this lecture, we will talk about UI 18 00:00:53,400 --> 00:00:55,110 ‫versus remote state. 19 00:00:55,110 --> 00:00:59,100 ‫I will show you all the options for where to place state 20 00:00:59,100 --> 00:01:01,800 ‫and also all the state management tools 21 00:01:01,800 --> 00:01:03,480 ‫that are available to us 22 00:01:03,480 --> 00:01:06,903 ‫to manage all these different types of state. 23 00:01:08,640 --> 00:01:12,540 ‫And let's actually start with these different types of state 24 00:01:12,540 --> 00:01:15,960 ‫that can exist in all web applications. 25 00:01:15,960 --> 00:01:20,640 ‫So, we can classify state in terms of state accessibility 26 00:01:20,640 --> 00:01:22,833 ‫and in terms of state domain. 27 00:01:23,760 --> 00:01:26,610 ‫Now when it comes to state accessibility, 28 00:01:26,610 --> 00:01:30,810 ‫state can be either a local state or global state. 29 00:01:30,810 --> 00:01:32,790 ‫And we already talked about this 30 00:01:32,790 --> 00:01:34,830 ‫but I just want to quickly review 31 00:01:34,830 --> 00:01:37,200 ‫these super important concepts. 32 00:01:37,200 --> 00:01:42,200 ‫So local state is only needed by one or a few components 33 00:01:42,300 --> 00:01:46,200 ‫while global state might be needed by many components 34 00:01:46,200 --> 00:01:48,930 ‫in different positions of the tree. 35 00:01:48,930 --> 00:01:52,110 ‫That's why local state is only accessible 36 00:01:52,110 --> 00:01:55,200 ‫inside the component that it was defined in 37 00:01:55,200 --> 00:01:57,810 ‫plus maybe its child components 38 00:01:57,810 --> 00:02:01,560 ‫while global state can actually be made accessible 39 00:02:01,560 --> 00:02:04,830 ‫to every single component in the application. 40 00:02:04,830 --> 00:02:08,310 ‫So it's the accessibility of a state variable 41 00:02:08,310 --> 00:02:11,943 ‫that changes between local and global state. 42 00:02:12,810 --> 00:02:15,690 ‫Now if you need to create a new state variable 43 00:02:15,690 --> 00:02:17,100 ‫in a component 44 00:02:17,100 --> 00:02:21,240 ‫but are not sure whether it should be local or global state, 45 00:02:21,240 --> 00:02:24,720 ‫there is a very nice trick that can help. 46 00:02:24,720 --> 00:02:27,960 ‫So all you need to do is to ask yourself 47 00:02:27,960 --> 00:02:31,200 ‫if this component was rendered twice, 48 00:02:31,200 --> 00:02:33,900 ‫should a state update in one of the components 49 00:02:33,900 --> 00:02:36,570 ‫reflect in the other one? 50 00:02:36,570 --> 00:02:39,810 ‫And if the answer is no, then it means 51 00:02:39,810 --> 00:02:42,030 ‫that it's local state. 52 00:02:42,030 --> 00:02:45,030 ‫But if the answer is yes, you have found yourself 53 00:02:45,030 --> 00:02:47,520 ‫a global state variable. 54 00:02:47,520 --> 00:02:50,610 ‫So just keep this trick in mind for the future 55 00:02:50,610 --> 00:02:52,950 ‫as it can be quite helpful. 56 00:02:52,950 --> 00:02:57,000 ‫Okay and now moving on to the state domain, 57 00:02:57,000 --> 00:03:01,530 ‫we can classify each piece of state as either remote state 58 00:03:01,530 --> 00:03:03,093 ‫or UI state. 59 00:03:03,930 --> 00:03:07,920 ‫So remote state is basically all application data 60 00:03:07,920 --> 00:03:10,650 ‫that is loaded from a remote server. 61 00:03:10,650 --> 00:03:13,410 ‫So usually using an API. 62 00:03:13,410 --> 00:03:16,770 ‫So it's basically state that lives on a server 63 00:03:16,770 --> 00:03:20,633 ‫but that can be loaded into our application. 64 00:03:20,633 --> 00:03:24,690 ‫UI state on the other hand is basically everything else. 65 00:03:24,690 --> 00:03:27,870 ‫So things like the currently selected theme, 66 00:03:27,870 --> 00:03:31,980 ‫applied list filters, form inputs, open panels 67 00:03:31,980 --> 00:03:33,453 ‫and many, many more. 68 00:03:34,620 --> 00:03:39,000 ‫So again, all state that is not the core application data 69 00:03:39,000 --> 00:03:43,650 ‫that we usually fetch from an API is UI state. 70 00:03:43,650 --> 00:03:46,050 ‫So whenever you have some state, 71 00:03:46,050 --> 00:03:48,390 ‫it's extremely important to always know 72 00:03:48,390 --> 00:03:52,440 ‫whether you're dealing with remote state or with UI state 73 00:03:52,440 --> 00:03:54,060 ‫because they need to be managed 74 00:03:54,060 --> 00:03:56,610 ‫in a completely different way. 75 00:03:56,610 --> 00:04:01,380 ‫So remote state is fundamentally different from UI state 76 00:04:01,380 --> 00:04:05,070 ‫because we usually get it in an asynchronous way 77 00:04:05,070 --> 00:04:08,310 ‫and because the data might need to be re-fetched 78 00:04:08,310 --> 00:04:10,710 ‫and updated frequently. 79 00:04:10,710 --> 00:04:13,380 ‫Therefore, in a large scale application, 80 00:04:13,380 --> 00:04:17,940 ‫remote state should be cached, revalidated and so on. 81 00:04:17,940 --> 00:04:21,183 ‫And so for that, we need some specialized tools. 82 00:04:22,080 --> 00:04:23,850 ‫UI state on the other hand 83 00:04:23,850 --> 00:04:28,320 ‫is usually synchronous and stored right in the application 84 00:04:28,320 --> 00:04:32,010 ‫and does not interact with any server at all. 85 00:04:32,010 --> 00:04:36,240 ‫And so this means that UI State is very easy to handle 86 00:04:36,240 --> 00:04:38,610 ‫with the tools that we already know of. 87 00:04:38,610 --> 00:04:42,630 ‫So things like useState or useReducer. 88 00:04:42,630 --> 00:04:44,370 ‫And we will take a closer look 89 00:04:44,370 --> 00:04:46,710 ‫at these tools later in this lecture. 90 00:04:46,710 --> 00:04:50,550 ‫But for now, let's focus on where we can actually 91 00:04:50,550 --> 00:04:55,500 ‫physically place each state variable in our code base. 92 00:04:55,500 --> 00:04:58,980 ‫So, whenever we need a new piece of state, 93 00:04:58,980 --> 00:05:01,500 ‫we have about six different options 94 00:05:01,500 --> 00:05:03,810 ‫on where we can place it. 95 00:05:03,810 --> 00:05:07,860 ‫If all we need is local state, then we simply place it 96 00:05:07,860 --> 00:05:12,210 ‫in a local component using useState, useReducer 97 00:05:12,210 --> 00:05:14,370 ‫or even useRef. 98 00:05:14,370 --> 00:05:17,040 ‫So a ref can also be considered state 99 00:05:17,040 --> 00:05:20,400 ‫even though it won't re-render the component. 100 00:05:20,400 --> 00:05:23,790 ‫Now many times, we actually need a piece of state 101 00:05:23,790 --> 00:05:26,460 ‫in multiple related components. 102 00:05:26,460 --> 00:05:29,310 ‫And so then, it's time to lift the state up 103 00:05:29,310 --> 00:05:33,270 ‫by placing it in a parent component of all the components 104 00:05:33,270 --> 00:05:34,920 ‫that need it. 105 00:05:34,920 --> 00:05:39,420 ‫So a parent component is another state placement option. 106 00:05:39,420 --> 00:05:43,170 ‫However, even that sometimes is not enough. 107 00:05:43,170 --> 00:05:46,470 ‫So sometimes we have actual global state 108 00:05:46,470 --> 00:05:49,800 ‫and then one good solution is to place the state 109 00:05:49,800 --> 00:05:51,930 ‫into a context. 110 00:05:51,930 --> 00:05:54,540 ‫So this is where the Context API 111 00:05:54,540 --> 00:05:57,450 ‫that we have been learning about comes into play 112 00:05:57,450 --> 00:06:01,860 ‫as we can use it together with useState or useReducer 113 00:06:01,860 --> 00:06:04,080 ‫to manage global state. 114 00:06:04,080 --> 00:06:07,140 ‫Just note that context on its own 115 00:06:07,140 --> 00:06:10,590 ‫is actually not who is managing the state. 116 00:06:10,590 --> 00:06:13,170 ‫State still needs to be managed 117 00:06:13,170 --> 00:06:18,170 ‫so to be created and updated by useState or by useReducer. 118 00:06:18,690 --> 00:06:20,940 ‫But we then use the Context API 119 00:06:20,940 --> 00:06:25,740 ‫to give all components in the tree access to that state. 120 00:06:25,740 --> 00:06:30,090 ‫But anyway, the Context API is actually best suited 121 00:06:30,090 --> 00:06:32,070 ‫to manage UI state 122 00:06:32,070 --> 00:06:34,830 ‫and not necessarily remote state 123 00:06:34,830 --> 00:06:38,580 ‫especially when you are building a bigger application 124 00:06:38,580 --> 00:06:41,910 ‫but more about that in the next slide. 125 00:06:41,910 --> 00:06:44,640 ‫So if you need to manage remote state 126 00:06:44,640 --> 00:06:46,560 ‫in a complex application 127 00:06:46,560 --> 00:06:50,490 ‫or just need a more efficient way of managing global state 128 00:06:50,490 --> 00:06:51,570 ‫in general, 129 00:06:51,570 --> 00:06:53,640 ‫you can opt for one of the many 130 00:06:53,640 --> 00:06:57,210 ‫third-party state management libraries that exist 131 00:06:57,210 --> 00:06:58,833 ‫in the React ecosystem. 132 00:06:59,670 --> 00:07:03,360 ‫So you can place your global state into Redux, 133 00:07:03,360 --> 00:07:08,360 ‫into React Query or SWR or Zustand or one of the many other 134 00:07:09,780 --> 00:07:12,720 ‫external state management solutions. 135 00:07:12,720 --> 00:07:15,390 ‫And some of these solutions are suited 136 00:07:15,390 --> 00:07:17,370 ‫for global remote state 137 00:07:17,370 --> 00:07:20,913 ‫and some for global UI state or both. 138 00:07:21,750 --> 00:07:25,890 ‫Okay, next up as we learned in the previous section 139 00:07:25,890 --> 00:07:28,050 ‫is the URL. 140 00:07:28,050 --> 00:07:32,040 ‫So the URL is yet another excellent place 141 00:07:32,040 --> 00:07:35,400 ‫where we can store global state that we want to make 142 00:07:35,400 --> 00:07:38,370 ‫easily shareable and bookmarkable 143 00:07:38,370 --> 00:07:42,300 ‫or that we just want to pass between pages. 144 00:07:42,300 --> 00:07:46,260 ‫And finally, sometimes we need to store some data 145 00:07:46,260 --> 00:07:48,630 ‫inside the user's browser. 146 00:07:48,630 --> 00:07:51,900 ‫And in that case, we can use local storage, 147 00:07:51,900 --> 00:07:55,320 ‫session storage or something like that. 148 00:07:55,320 --> 00:07:56,910 ‫Now just like refs, 149 00:07:56,910 --> 00:08:00,930 ‫this is state that won't actually re-render any components 150 00:08:00,930 --> 00:08:03,660 ‫but it's still technically application state 151 00:08:03,660 --> 00:08:06,330 ‫which is why I included this in this list 152 00:08:06,330 --> 00:08:09,243 ‫as yet another possible state location. 153 00:08:10,290 --> 00:08:14,700 ‫All right, so hopefully this is a helpful overview for you 154 00:08:14,700 --> 00:08:17,430 ‫that you can keep handy once you start building 155 00:08:17,430 --> 00:08:19,860 ‫your own applications. 156 00:08:19,860 --> 00:08:23,610 ‫And now to finish, let's try to answer the question of 157 00:08:23,610 --> 00:08:27,510 ‫how to manage the different types of state in practice? 158 00:08:27,510 --> 00:08:30,810 ‫Or in other words, what tools should be used 159 00:08:30,810 --> 00:08:33,030 ‫for each kind of state? 160 00:08:33,030 --> 00:08:36,600 ‫So if we combine all classifications of state 161 00:08:36,600 --> 00:08:39,810 ‫according to accessibility and domain, 162 00:08:39,810 --> 00:08:42,900 ‫we end up with these four combinations. 163 00:08:42,900 --> 00:08:47,900 ‫So local UI state, global UI state, local remote state 164 00:08:48,780 --> 00:08:51,870 ‫and finally, global remote state. 165 00:08:51,870 --> 00:08:54,840 ‫And so let's now look at the tools that we can use 166 00:08:54,840 --> 00:08:58,350 ‫to manage each of these state types. 167 00:08:58,350 --> 00:09:00,450 ‫And starting with the easiest, 168 00:09:00,450 --> 00:09:02,910 ‫we simply manage local UI state 169 00:09:02,910 --> 00:09:06,000 ‫with the tools that we already know about. 170 00:09:06,000 --> 00:09:08,970 ‫Now when it comes to local remote state, 171 00:09:08,970 --> 00:09:12,420 ‫we can use a simple fetch inside a useEffect 172 00:09:12,420 --> 00:09:15,480 ‫in order to load data from a remote API 173 00:09:15,480 --> 00:09:18,150 ‫and then store that data as state 174 00:09:18,150 --> 00:09:20,163 ‫with useState or useReducer. 175 00:09:21,300 --> 00:09:24,630 ‫So this is exactly what we've been doing all the time 176 00:09:24,630 --> 00:09:27,270 ‫up until this point, right? 177 00:09:27,270 --> 00:09:30,300 ‫However, this is usually only a good idea 178 00:09:30,300 --> 00:09:32,550 ‫in small applications. 179 00:09:32,550 --> 00:09:34,260 ‫In bigger applications, 180 00:09:34,260 --> 00:09:39,210 ‫we usually just treat all remote state as global state 181 00:09:39,210 --> 00:09:42,363 ‫which brings us to the next type of state. 182 00:09:43,440 --> 00:09:46,830 ‫So when we need to manage global remote state, 183 00:09:46,830 --> 00:09:50,310 ‫we have to choose if we want to use a general solution 184 00:09:50,310 --> 00:09:54,510 ‫like the Context API or a library like Redux 185 00:09:54,510 --> 00:09:58,560 ‫or if we want to use a tool that is highly specialized 186 00:09:58,560 --> 00:10:01,020 ‫in managing remote state. 187 00:10:01,020 --> 00:10:06,020 ‫So those are tools like React Query, SWR or RTK Query 188 00:10:06,960 --> 00:10:09,900 ‫which have built-in mechanisms like caching 189 00:10:09,900 --> 00:10:12,000 ‫and automatic re-fetching 190 00:10:12,000 --> 00:10:15,030 ‫in order to deal with the asynchronous nature 191 00:10:15,030 --> 00:10:17,010 ‫of remote state. 192 00:10:17,010 --> 00:10:20,280 ‫In fact, these tools are so helpful 193 00:10:20,280 --> 00:10:24,960 ‫that we will study React Query in depth in the next project. 194 00:10:24,960 --> 00:10:29,460 ‫So I definitely recommend going with a solution like this. 195 00:10:29,460 --> 00:10:34,460 ‫But anyway to finish now, let's move up to global UI state. 196 00:10:35,490 --> 00:10:37,620 ‫And here, the Context API 197 00:10:37,620 --> 00:10:42,600 ‫coupled with useState or useReducer is a great tool. 198 00:10:42,600 --> 00:10:45,660 ‫Now if you need something a bit more performant, 199 00:10:45,660 --> 00:10:48,630 ‫you can look into one of the third-party libraries 200 00:10:48,630 --> 00:10:50,430 ‫that we already discussed. 201 00:10:50,430 --> 00:10:54,210 ‫So something like Redux which we will actually learn 202 00:10:54,210 --> 00:10:56,220 ‫later in this section. 203 00:10:56,220 --> 00:10:59,250 ‫And so by then, we will talk more about the differences 204 00:10:59,250 --> 00:11:04,250 ‫between Redux and the Context API and also when to use each. 205 00:11:04,980 --> 00:11:08,520 ‫All right, so the idea of this diagram 206 00:11:08,520 --> 00:11:11,970 ‫is more to give you an overview and a reference 207 00:11:11,970 --> 00:11:13,740 ‫that you can keep in the future 208 00:11:13,740 --> 00:11:16,320 ‫which should be really helpful. 209 00:11:16,320 --> 00:11:19,710 ‫So I really wish that I had something like this 210 00:11:19,710 --> 00:11:22,830 ‫when I first started learning React development 211 00:11:22,830 --> 00:11:26,013 ‫and especially learning about state management. 212 00:11:26,910 --> 00:11:29,730 ‫But anyway, let's now quickly go back 213 00:11:29,730 --> 00:11:33,600 ‫to the worldwise project that we have started working on 214 00:11:33,600 --> 00:11:35,073 ‫in the previous section.