1 00:00:01,020 --> 00:00:02,910 ‫Another aspect that I mentioned 2 00:00:02,910 --> 00:00:04,830 ‫in the state management lecture 3 00:00:04,830 --> 00:00:06,900 ‫was derived state. 4 00:00:06,900 --> 00:00:10,923 ‫Sounds complicated but it's actually pretty straightforward. 5 00:00:12,330 --> 00:00:15,780 ‫So, essentially, derived state is simply state 6 00:00:15,780 --> 00:00:19,980 ‫that is computed from another existing piece of state 7 00:00:19,980 --> 00:00:21,870 ‫or also from props. 8 00:00:21,870 --> 00:00:24,900 ‫But let's look at some actual code. 9 00:00:24,900 --> 00:00:27,600 ‫So, here we have three pieces of state 10 00:00:27,600 --> 00:00:31,620 ‫as we can see by the three use state function calls. 11 00:00:31,620 --> 00:00:34,170 ‫However, if we analyze these states, 12 00:00:34,170 --> 00:00:38,070 ‫it actually doesn't make much sense that all of them exist 13 00:00:38,070 --> 00:00:43,070 ‫because numItems and totalPrice depend entirely on the cart. 14 00:00:43,800 --> 00:00:47,910 ‫So numItems is simply the number of items in the cart 15 00:00:47,910 --> 00:00:52,410 ‫and totalPrice is the sum of all the prices in the cart. 16 00:00:52,410 --> 00:00:55,864 ‫And so, all the data for these two pieces of state 17 00:00:55,864 --> 00:00:58,830 ‫is actually already in the cart, 18 00:00:58,830 --> 00:01:00,060 ‫so there's no need 19 00:01:00,060 --> 00:01:02,700 ‫to create these additional state variables, 20 00:01:02,700 --> 00:01:06,120 ‫and doing so is actually quite problematic, 21 00:01:06,120 --> 00:01:10,620 ‫first, because now we have to keep all these states in sync. 22 00:01:10,620 --> 00:01:14,610 ‫So, we need to be careful to always update them together. 23 00:01:14,610 --> 00:01:18,060 ‫So, in this situation, whenever we update the cart, 24 00:01:18,060 --> 00:01:21,510 ‫we will also need to manually update the number of items 25 00:01:21,510 --> 00:01:22,549 ‫and the total price, 26 00:01:22,549 --> 00:01:26,130 ‫otherwise our states would get out of sync. 27 00:01:26,130 --> 00:01:28,920 ‫But updating these three states separately 28 00:01:28,920 --> 00:01:30,810 ‫creates a second problem 29 00:01:30,810 --> 00:01:34,680 ‫because that will then re-render the component three times 30 00:01:34,680 --> 00:01:38,640 ‫which is absolutely unnecessary in this example. 31 00:01:38,640 --> 00:01:41,850 ‫Instead, we can simply derive the numItems 32 00:01:41,850 --> 00:01:44,790 ‫and totalPrice state from the cart 33 00:01:44,790 --> 00:01:47,370 ‫and therefore solve all these problems 34 00:01:47,370 --> 00:01:49,650 ‫because the cart already contains 35 00:01:49,650 --> 00:01:51,930 ‫all the data that we need. 36 00:01:51,930 --> 00:01:56,010 ‫So here, we simply calculate numItems as the cart length 37 00:01:56,010 --> 00:01:59,040 ‫and totalPrice as the sum of all prices 38 00:01:59,040 --> 00:02:01,770 ‫and store them in regular variables. 39 00:02:01,770 --> 00:02:04,110 ‫There is no used date required here 40 00:02:04,110 --> 00:02:07,440 ‫which will cause no unnecessary re-renders. 41 00:02:07,440 --> 00:02:10,800 ‫The cart state acts as a single source of truth 42 00:02:10,800 --> 00:02:13,260 ‫for these related pieces of state, 43 00:02:13,260 --> 00:02:17,370 ‫making sure that everything will always stay in sync. 44 00:02:17,370 --> 00:02:20,130 ‫And this works because updating the cart 45 00:02:20,130 --> 00:02:22,200 ‫will re-render the component 46 00:02:22,200 --> 00:02:25,170 ‫which means that the function is called again. 47 00:02:25,170 --> 00:02:28,890 ‫And, so then, as all the code is executed, again, 48 00:02:28,890 --> 00:02:33,180 ‫numItems and totalPrice will also, automatically, 49 00:02:33,180 --> 00:02:35,400 ‫get recalculated. 50 00:02:35,400 --> 00:02:40,020 ‫Now, of course, most of the time, we cannot derive state 51 00:02:40,020 --> 00:02:42,840 ‫but whenever you have a situation like this one, 52 00:02:42,840 --> 00:02:46,590 ‫where one state can easily be computed from another, 53 00:02:46,590 --> 00:02:49,410 ‫always prefer derived state. 54 00:02:49,410 --> 00:02:51,840 ‫So, don't create two state variables 55 00:02:51,840 --> 00:02:54,780 ‫if you actually only need one. 56 00:02:54,780 --> 00:02:57,060 ‫That's a very common beginner mistake, 57 00:02:57,060 --> 00:02:59,433 ‫but now, you will be able to avoid it.