1 00:00:01,080 --> 00:00:03,270 ‫Of course, let's now use the idea 2 00:00:03,270 --> 00:00:06,063 ‫of derived state in practice. 3 00:00:07,080 --> 00:00:08,250 ‫And in particular 4 00:00:08,250 --> 00:00:11,580 ‫we now want to calculate our statistics here. 5 00:00:11,580 --> 00:00:14,400 ‫So calculating the number of items on the list, 6 00:00:14,400 --> 00:00:16,710 ‫how many we already have packed 7 00:00:16,710 --> 00:00:18,900 ‫and then the percentage of that. 8 00:00:18,900 --> 00:00:21,240 ‫Now, if we think about these numbers, 9 00:00:21,240 --> 00:00:24,510 ‫for example, the number of items in the list, 10 00:00:24,510 --> 00:00:27,120 ‫that number can be directly computed 11 00:00:27,120 --> 00:00:30,960 ‫from the items array itself, right? 12 00:00:30,960 --> 00:00:34,890 ‫And so derived state is perfect for this, 13 00:00:34,890 --> 00:00:36,870 ‫but before we use derived state 14 00:00:36,870 --> 00:00:39,393 ‫I will show you how not to do this. 15 00:00:41,610 --> 00:00:45,177 ‫So the way we should not do it is to use state. 16 00:00:46,410 --> 00:00:49,900 ‫So let's say we created a piece of state called numItems 17 00:00:50,951 --> 00:00:52,701 ‫and then setNumItems. 18 00:00:55,200 --> 00:00:56,033 ‫And by the way, 19 00:00:56,033 --> 00:00:59,910 ‫you don't need to write this code right here, all right. 20 00:00:59,910 --> 00:01:03,090 ‫So this is just to show you how not to do it. 21 00:01:03,090 --> 00:01:06,450 ‫So initially we start with 0 items. 22 00:01:06,450 --> 00:01:09,150 ‫Now the problem with this is, as I said before, 23 00:01:09,150 --> 00:01:13,890 ‫is that we now have to also update this piece of state. 24 00:01:13,890 --> 00:01:15,600 ‫So whenever, for example, 25 00:01:15,600 --> 00:01:19,140 ‫one new item is added, besides setting the items, 26 00:01:19,140 --> 00:01:23,550 ‫we also need to make sure to increase this number here. 27 00:01:23,550 --> 00:01:28,550 ‫So setNumItems and then the number and then num plus 1. 28 00:01:31,080 --> 00:01:34,560 ‫So with this, we would ensure that these two pieces of state 29 00:01:34,560 --> 00:01:38,340 ‫stay in sync, but that's of course a lot of additional work 30 00:01:38,340 --> 00:01:40,230 ‫that we might forget to do 31 00:01:40,230 --> 00:01:43,560 ‫and also it can cause multiple re-renders 32 00:01:43,560 --> 00:01:46,740 ‫where at least one of them here is unnecessary. 33 00:01:46,740 --> 00:01:50,130 ‫Now in React 18, these should be batched. 34 00:01:50,130 --> 00:01:52,350 ‫So these two should happen at the same time, 35 00:01:52,350 --> 00:01:54,090 ‫but more about that later. 36 00:01:54,090 --> 00:01:56,670 ‫But in any case, this is a terrible idea. 37 00:01:56,670 --> 00:01:59,910 ‫So instead we can just define a new variable 38 00:01:59,910 --> 00:02:04,440 ‫called also numItems, but we can simply derive it 39 00:02:04,440 --> 00:02:08,400 ‫so we can calculate it based on the items array. 40 00:02:08,400 --> 00:02:12,570 ‫So that simply items.length 41 00:02:12,570 --> 00:02:17,570 ‫and so this works because as soon as the items are updated, 42 00:02:17,850 --> 00:02:21,270 ‫so as soon as this piece of state is updated, 43 00:02:21,270 --> 00:02:23,400 ‫the component will re-render. 44 00:02:23,400 --> 00:02:25,320 ‫And when the component re-renders 45 00:02:25,320 --> 00:02:28,380 ‫that means that the function here is called again. 46 00:02:28,380 --> 00:02:32,760 ‫And therefore then this piece of code here will run again. 47 00:02:32,760 --> 00:02:37,260 ‫And so if a new item has been added then now the item state. 48 00:02:37,260 --> 00:02:38,760 ‫So this array is different 49 00:02:38,760 --> 00:02:42,150 ‫and therefore the length will also be different. 50 00:02:42,150 --> 00:02:44,130 ‫Now this numItems variable, 51 00:02:44,130 --> 00:02:47,460 ‫we actually don't need it right here in the app component, 52 00:02:47,460 --> 00:02:50,130 ‫but in the stats component. 53 00:02:50,130 --> 00:02:51,870 ‫So this one right here. 54 00:02:51,870 --> 00:02:54,030 ‫So we have two options now. 55 00:02:54,030 --> 00:02:56,700 ‫The first one is to keep numItems here 56 00:02:56,700 --> 00:02:59,280 ‫and pass it as a prop into stats, 57 00:02:59,280 --> 00:03:01,290 ‫but I think what makes more sense 58 00:03:01,290 --> 00:03:04,200 ‫is to actually calculate this state here. 59 00:03:04,200 --> 00:03:08,430 ‫So this derived state inside the stats itself. 60 00:03:08,430 --> 00:03:11,880 ‫Also because we will actually calculate three values 61 00:03:11,880 --> 00:03:14,220 ‫and so if we were to calculate them here 62 00:03:14,220 --> 00:03:16,890 ‫then we would have to pass three props 63 00:03:16,890 --> 00:03:19,200 ‫which doesn't make a lot of sense. 64 00:03:19,200 --> 00:03:21,630 ‫So let's just cut that from here 65 00:03:21,630 --> 00:03:25,320 ‫and paste it here into the items. 66 00:03:25,320 --> 00:03:29,010 ‫Well, actually no, that's not correct. 67 00:03:29,010 --> 00:03:30,840 ‫Want to paste it right here. 68 00:03:30,840 --> 00:03:35,220 ‫But now as soon as I save this, we will get an error, right. 69 00:03:35,220 --> 00:03:36,720 ‫And so the reason for that is 70 00:03:36,720 --> 00:03:38,910 ‫that now of course we don't know, 71 00:03:38,910 --> 00:03:41,430 ‫so this stats component doesn't know anything 72 00:03:41,430 --> 00:03:44,010 ‫about what this items is. 73 00:03:44,010 --> 00:03:49,010 ‫So we now have another component that needs the item state. 74 00:03:49,140 --> 00:03:52,023 ‫So we just pass it down as a prop. 75 00:03:54,960 --> 00:03:59,190 ‫Just like we passed it also into the packing list. 76 00:03:59,190 --> 00:04:01,960 ‫Now of course, we need to accept that prop down here 77 00:04:05,970 --> 00:04:07,890 ‫and so this solves the problem. 78 00:04:07,890 --> 00:04:11,103 ‫And so here we can now already use that value. 79 00:04:12,360 --> 00:04:15,850 ‫So you have numItems on your list 80 00:04:16,800 --> 00:04:19,200 ‫and so yeah, indeed, right now that's zero, 81 00:04:19,200 --> 00:04:23,460 ‫but if I add some socks here and maybe a shirt 82 00:04:23,460 --> 00:04:25,950 ‫then you see as soon as we add new items here, 83 00:04:25,950 --> 00:04:27,210 ‫the array grows 84 00:04:27,210 --> 00:04:30,513 ‫and so then this number here also gets updated. 85 00:04:31,740 --> 00:04:34,650 ‫So watch what happens when I hit enter 86 00:04:34,650 --> 00:04:38,520 ‫and immediately this changed from 2 to 3. 87 00:04:38,520 --> 00:04:42,273 ‫Let's just quickly remove those console.logs there. 88 00:04:45,000 --> 00:04:46,470 ‫So that's much better 89 00:04:46,470 --> 00:04:50,280 ‫and so now let's derive our other pieces of state. 90 00:04:50,280 --> 00:04:52,590 ‫So of course this one here, 91 00:04:52,590 --> 00:04:54,330 ‫so the ones that are already packed 92 00:04:54,330 --> 00:04:59,073 ‫and the percentage both depend on the items themselves. 93 00:05:00,360 --> 00:05:05,360 ‫So number of packed is simply the items array filtered 94 00:05:07,440 --> 00:05:10,473 ‫by the items that are already packed. 95 00:05:11,400 --> 00:05:13,743 ‫So item.packed. 96 00:05:14,640 --> 00:05:15,473 ‫So that's a new array 97 00:05:15,473 --> 00:05:18,843 ‫and so then we can take the length of that one. 98 00:05:19,920 --> 00:05:24,920 ‫So you have already packed number of packed 99 00:05:25,440 --> 00:05:27,510 ‫and so that immediately becomes 0, 100 00:05:27,510 --> 00:05:30,600 ‫but then when we mark one of them as packed. 101 00:05:30,600 --> 00:05:31,893 ‫Ah, beautiful. 102 00:05:33,420 --> 00:05:36,243 ‫So two, and then all of them. 103 00:05:38,400 --> 00:05:39,660 ‫Great. 104 00:05:39,660 --> 00:05:41,790 ‫And now finally just the percentage 105 00:05:41,790 --> 00:05:43,803 ‫which should be pretty easy. 106 00:05:46,650 --> 00:05:49,470 ‫So that's just a number of packed 107 00:05:49,470 --> 00:05:53,860 ‫divided by the number of items times 100 108 00:05:55,230 --> 00:05:58,503 ‫and then let's grab all of that and round it. 109 00:05:59,970 --> 00:06:02,110 ‫So Math.round 110 00:06:03,150 --> 00:06:05,133 ‫and so here then we can replace that. 111 00:06:10,050 --> 00:06:12,420 ‫Nice, that also works. 112 00:06:12,420 --> 00:06:15,090 ‫And now it hits 100%. 113 00:06:15,090 --> 00:06:18,330 ‫And in that case, so whenever we have 100% 114 00:06:18,330 --> 00:06:21,570 ‫I would like to display an entirely different message here. 115 00:06:21,570 --> 00:06:25,050 ‫So telling them basically that they are done. 116 00:06:25,050 --> 00:06:27,450 ‫So watch what happens here in the demo. 117 00:06:27,450 --> 00:06:29,100 ‫Yeah, that's it. 118 00:06:29,100 --> 00:06:30,630 ‫So let's write that here 119 00:06:30,630 --> 00:06:33,693 ‫and so for that, we need some more conditional rendering. 120 00:06:34,590 --> 00:06:38,760 ‫So actually we will just conditionally define what is here 121 00:06:38,760 --> 00:06:40,683 ‫inside this em element. 122 00:06:41,790 --> 00:06:45,090 ‫So let's enter our JavaScript mode 123 00:06:45,090 --> 00:06:49,650 ‫and say that whenever the percentage is equal to 100 124 00:06:49,650 --> 00:06:52,623 ‫then the content should be this string right here, 125 00:06:53,767 --> 00:06:58,767 ‫"You got everything! Ready to go." 126 00:07:01,440 --> 00:07:04,060 ‫Now let's add a plane emoji here as well 127 00:07:06,870 --> 00:07:08,530 ‫and now else 128 00:07:09,930 --> 00:07:13,110 ‫and so let's move that here. 129 00:07:13,110 --> 00:07:16,470 ‫And so now instead of this text that we had here, 130 00:07:16,470 --> 00:07:18,480 ‫we now need a string. 131 00:07:18,480 --> 00:07:21,030 ‫And so let's make a template literal here 132 00:07:21,030 --> 00:07:24,963 ‫and then we need to add of course, these. 133 00:07:28,290 --> 00:07:31,080 ‫And in case we didn't want to create this template literal, 134 00:07:31,080 --> 00:07:35,850 ‫we could of course also have simply rendered one em 135 00:07:35,850 --> 00:07:37,083 ‫for each of these cases. 136 00:07:37,920 --> 00:07:40,290 ‫Now, this looks not correct, 137 00:07:40,290 --> 00:07:42,603 ‫maybe it's because of this right here. 138 00:07:46,140 --> 00:07:49,080 ‫Yeah, but it looks at as though it works 139 00:07:49,080 --> 00:07:51,540 ‫even though we are in the wrong app. 140 00:07:51,540 --> 00:07:55,260 ‫Ah, but here we already have our correct message. 141 00:07:55,260 --> 00:07:57,120 ‫Let's uncheck one of those 142 00:07:57,120 --> 00:08:00,450 ‫and now you have three items on your list. 143 00:08:00,450 --> 00:08:01,890 ‫Great. 144 00:08:01,890 --> 00:08:05,100 ‫Now let's remove this one and this one as well. 145 00:08:05,100 --> 00:08:07,950 ‫And so now we have already packed zero 146 00:08:07,950 --> 00:08:09,750 ‫and also in this case 147 00:08:09,750 --> 00:08:12,990 ‫I want to display something else as well. 148 00:08:12,990 --> 00:08:14,820 ‫So also another message. 149 00:08:14,820 --> 00:08:16,020 ‫So if this is the case, 150 00:08:16,020 --> 00:08:19,110 ‫if there are not even any items in the array, 151 00:08:19,110 --> 00:08:21,510 ‫then it's not even necessary actually 152 00:08:21,510 --> 00:08:24,000 ‫to perform all these calculations 153 00:08:24,000 --> 00:08:26,790 ‫because they will just be zero anyway. 154 00:08:26,790 --> 00:08:30,540 ‫So what I want to do now here is to show you a good use case 155 00:08:30,540 --> 00:08:34,260 ‫of an early return as conditional rendering. 156 00:08:34,260 --> 00:08:36,630 ‫So what we're going to do is to say 157 00:08:36,630 --> 00:08:40,487 ‫if there is no items.length, 158 00:08:43,200 --> 00:08:45,360 ‫then simply return. 159 00:08:45,360 --> 00:08:50,360 ‫So that's return a paragraph with the class of footer 160 00:08:52,499 --> 00:08:55,590 ‫and then here also an em 161 00:08:55,590 --> 00:09:00,590 ‫and then start adding some items to your packing list 162 00:09:03,690 --> 00:09:07,053 ‫and again, some nice emoji here, like this rocket. 163 00:09:10,020 --> 00:09:14,880 ‫And so now let's reload this here 164 00:09:14,880 --> 00:09:17,220 ‫so that we then have no items. 165 00:09:17,220 --> 00:09:19,200 ‫And so yeah, here we go. 166 00:09:19,200 --> 00:09:23,340 ‫Now here the class name is not footer, but stats. 167 00:09:23,340 --> 00:09:26,310 ‫So basically the same as here. 168 00:09:26,310 --> 00:09:28,470 ‫And so yeah, then we got this. 169 00:09:28,470 --> 00:09:32,370 ‫So this text that we defined right here, so this paragraph, 170 00:09:32,370 --> 00:09:34,260 ‫and again that's because in this case 171 00:09:34,260 --> 00:09:37,440 ‫it doesn't even make sense to then do these calculations. 172 00:09:37,440 --> 00:09:40,170 ‫So if there are no elements anyway in the array 173 00:09:40,170 --> 00:09:42,813 ‫then don't even bother with all of this here. 174 00:09:43,830 --> 00:09:45,960 ‫Now in this case, of course 175 00:09:45,960 --> 00:09:49,440 ‫it would've been no problem to still do these calculations 176 00:09:49,440 --> 00:09:51,120 ‫as they are not a lot of work 177 00:09:51,120 --> 00:09:54,930 ‫and we could then have some conditional rendering in here. 178 00:09:54,930 --> 00:09:56,100 ‫But this was just to show you 179 00:09:56,100 --> 00:10:00,060 ‫that the option of an early return is sometimes also nice. 180 00:10:00,060 --> 00:10:03,630 ‫So it's also quite legible here if you ask me. 181 00:10:03,630 --> 00:10:06,060 ‫So when you arrive at this component 182 00:10:06,060 --> 00:10:07,650 ‫maybe you have never seen it before 183 00:10:07,650 --> 00:10:10,560 ‫because one of your coworkers wrote it, 184 00:10:10,560 --> 00:10:15,060 ‫then you can right away see that if there are no items, 185 00:10:15,060 --> 00:10:17,130 ‫well then just return this 186 00:10:17,130 --> 00:10:21,030 ‫and in all other cases then perform the rest of the logic 187 00:10:21,030 --> 00:10:22,770 ‫of the component. 188 00:10:22,770 --> 00:10:25,530 ‫Great. So hopefully that made sense 189 00:10:25,530 --> 00:10:29,820 ‫and so next up, let's see another use case of derived state 190 00:10:29,820 --> 00:10:34,470 ‫which will be to implement this sorting functionality here. 191 00:10:34,470 --> 00:10:37,890 ‫So that will make this application look even more real life 192 00:10:37,890 --> 00:10:40,233 ‫and so I think this is going to be really fun.