1 00:00:00,000 --> 00:00:04,770 ‫So after using a ref to select a dumb element 2 00:00:04,770 --> 00:00:06,838 ‫in the previous lecture, let's now focus 3 00:00:06,838 --> 00:00:09,392 ‫on the other use case of refs 4 00:00:09,392 --> 00:00:13,432 ‫which is to simply give us a variable that is persisted 5 00:00:13,432 --> 00:00:17,523 ‫across renders without triggering a re-render. 6 00:00:18,358 --> 00:00:21,403 ‫So let's just search for some movie here. 7 00:00:21,403 --> 00:00:26,403 ‫For example, this amazing classic "Back to the Future". 8 00:00:27,090 --> 00:00:29,902 ‫And so now let's say that behind the scenes 9 00:00:29,902 --> 00:00:33,320 ‫of this application, we want to count how many times 10 00:00:33,320 --> 00:00:36,728 ‫the user selects a different rating. 11 00:00:36,728 --> 00:00:40,240 ‫So for example, let's say first I rate this three, 12 00:00:40,240 --> 00:00:43,296 ‫then seven, and then nine. 13 00:00:43,296 --> 00:00:46,431 ‫So this means that it took me a long time to decide 14 00:00:46,431 --> 00:00:49,950 ‫between the right rating of this movie. 15 00:00:49,950 --> 00:00:50,783 ‫And so let's say that 16 00:00:50,783 --> 00:00:54,192 ‫in our application we somehow wanted to register that. 17 00:00:54,192 --> 00:00:56,416 ‫Now I said behind the scenes 18 00:00:56,416 --> 00:00:59,923 ‫because we actually don't want this data to show up 19 00:00:59,923 --> 00:01:01,339 ‫on the screen. 20 00:01:01,339 --> 00:01:03,192 ‫So basically we don't want 21 00:01:03,192 --> 00:01:06,471 ‫like a counter anywhere here in the app 22 00:01:06,471 --> 00:01:10,325 ‫which tells us how many times the user has clicked here. 23 00:01:10,325 --> 00:01:13,530 ‫So again, it should happen behind the scenes. 24 00:01:13,530 --> 00:01:16,403 ‫And so this time what we need is a variable 25 00:01:16,403 --> 00:01:18,683 ‫that is persisted between renders 26 00:01:18,683 --> 00:01:23,670 ‫but that does not cause a re-render when it is updated. 27 00:01:23,670 --> 00:01:27,873 ‫And so a ref is a perfect use case for this. 28 00:01:29,721 --> 00:01:33,476 ‫So let's then come here to the movie details component 29 00:01:33,476 --> 00:01:36,603 ‫and let's create ourselves a new ref. 30 00:01:38,790 --> 00:01:41,343 ‫And I like to do that right here after the states. 31 00:01:43,950 --> 00:01:46,197 ‫So let's call this one here, countRef, 32 00:01:48,525 --> 00:01:51,060 ‫and then again use ref. 33 00:01:51,060 --> 00:01:53,354 ‫And then just like with useState here we pass 34 00:01:53,354 --> 00:01:56,252 ‫in the initial value of that variable. 35 00:01:56,252 --> 00:02:00,033 ‫And so in the beginning, the count is of course at zero. 36 00:02:01,071 --> 00:02:02,550 ‫All right? 37 00:02:02,550 --> 00:02:03,960 ‫And so now the idea is 38 00:02:03,960 --> 00:02:07,472 ‫that each time the user gives a new rating, 39 00:02:07,472 --> 00:02:10,446 ‫so by clicking here on one of the stars 40 00:02:10,446 --> 00:02:14,490 ‫this countRef ref should get updated so that then 41 00:02:14,490 --> 00:02:17,545 ‫when the user actually adds the movie to the list, 42 00:02:17,545 --> 00:02:22,545 ‫we can then add that here to the new watched movie object 43 00:02:23,550 --> 00:02:28,170 ‫so that we can then finally store that value somewhere. 44 00:02:28,170 --> 00:02:30,292 ‫So that count that we're going to create here 45 00:02:30,292 --> 00:02:35,292 ‫but first let's not take care of actually updating the ref. 46 00:02:35,393 --> 00:02:39,480 ‫And the way we do that is again, using a useEffect, 47 00:02:39,480 --> 00:02:43,485 ‫because remember that we are not allowed to mutate the ref 48 00:02:43,485 --> 00:02:45,341 ‫in render logic. 49 00:02:45,341 --> 00:02:48,477 ‫So instead we need to use a useEffect. 50 00:02:51,371 --> 00:02:56,371 ‫Okay, and when do we want to update the ref? 51 00:02:56,728 --> 00:03:01,354 ‫Well, each time that the user rates the movie again. 52 00:03:01,354 --> 00:03:03,150 ‫And so that's each time 53 00:03:03,150 --> 00:03:05,733 ‫that this piece of state here updates. 54 00:03:07,260 --> 00:03:08,093 ‫Okay. 55 00:03:08,093 --> 00:03:11,611 ‫And so now all we want to do is to take our account ref 56 00:03:11,611 --> 00:03:15,632 ‫and then manually mutate the current property. 57 00:03:15,632 --> 00:03:19,710 ‫So we can say that countRef dot current 58 00:03:19,710 --> 00:03:24,710 ‫should be equal countRef dot current plus one. 59 00:03:25,977 --> 00:03:27,617 ‫Okay. 60 00:03:27,617 --> 00:03:30,384 ‫And actually this updating here should only 61 00:03:30,384 --> 00:03:33,057 ‫happen when there already is a rating 62 00:03:33,057 --> 00:03:35,897 ‫because the effect will also run on mount 63 00:03:35,897 --> 00:03:39,752 ‫and so then it will already add plus one here 64 00:03:39,752 --> 00:03:42,633 ‫even without the user having rated. 65 00:03:43,470 --> 00:03:46,974 ‫So let's just say if there is a user rating 66 00:03:46,974 --> 00:03:49,550 ‫which in the beginning is not 67 00:03:49,550 --> 00:03:52,353 ‫because it'll still be this empty string. 68 00:03:53,820 --> 00:03:54,795 ‫Okay. 69 00:03:54,795 --> 00:03:57,169 ‫So again here we imperatively, 70 00:03:57,169 --> 00:04:00,464 ‫basically updated this variable. 71 00:04:00,464 --> 00:04:03,438 ‫So with a ref, we don't have a set function 72 00:04:03,438 --> 00:04:07,106 ‫but instead we simply mutate the current property 73 00:04:07,106 --> 00:04:08,760 ‫which is in the ref. 74 00:04:08,760 --> 00:04:09,930 ‫And so that's why we say 75 00:04:09,930 --> 00:04:14,176 ‫that a ref is basically like a box that can hold any value. 76 00:04:14,176 --> 00:04:16,042 ‫So we could, for example, also, 77 00:04:16,042 --> 00:04:18,842 ‫instead of just storing the count here, 78 00:04:18,842 --> 00:04:22,093 ‫store all the different ratings that the user has given 79 00:04:22,093 --> 00:04:23,370 ‫in an array. 80 00:04:23,370 --> 00:04:26,830 ‫So that would also be perfectly possible. 81 00:04:26,830 --> 00:04:29,819 ‫But anyway, let's then now come here 82 00:04:29,819 --> 00:04:34,230 ‫to the function where the new movie is actually added 83 00:04:34,230 --> 00:04:35,727 ‫to the watch list. 84 00:04:35,727 --> 00:04:36,840 ‫And here, 85 00:04:36,840 --> 00:04:40,473 ‫let's then create a new property countRatingDecisions. 86 00:04:44,430 --> 00:04:46,420 ‫And so this should then be equal 87 00:04:46,420 --> 00:04:51,420 ‫to the countRef dot the current property now, right? 88 00:04:56,670 --> 00:04:58,890 ‫And that's it. 89 00:04:58,890 --> 00:05:01,486 ‫So this should now already be working. 90 00:05:01,486 --> 00:05:03,994 ‫So let's test it out here. 91 00:05:03,994 --> 00:05:06,483 ‫Let's just make sure to reload. 92 00:05:08,769 --> 00:05:11,049 ‫All right. 93 00:05:11,049 --> 00:05:14,400 ‫So let's count how many times we click here. 94 00:05:14,400 --> 00:05:16,973 ‫So let's say first we think the movie is a seven 95 00:05:16,973 --> 00:05:20,580 ‫then maybe, ah, maybe it's a nine 96 00:05:20,580 --> 00:05:22,170 ‫but then we think even better. 97 00:05:22,170 --> 00:05:23,242 ‫And then we come to the conclusion 98 00:05:23,242 --> 00:05:25,796 ‫that it's actually an eight. 99 00:05:25,796 --> 00:05:28,350 ‫So we decided three times here. 100 00:05:28,350 --> 00:05:30,672 ‫And so let's now add this to the list. 101 00:05:30,672 --> 00:05:33,946 ‫Now in order to check out if this actually worked, 102 00:05:33,946 --> 00:05:37,243 ‫let's come here to our app. 103 00:05:37,243 --> 00:05:39,418 ‫So where we have our state so that 104 00:05:39,418 --> 00:05:44,418 ‫in there we can then see if the value was correctly set, 105 00:05:47,070 --> 00:05:48,840 ‫because of course we are not rendering 106 00:05:48,840 --> 00:05:51,003 ‫that new value anywhere here. 107 00:05:52,890 --> 00:05:54,464 ‫So here it is. 108 00:05:54,464 --> 00:05:58,620 ‫And indeed, countRatingDecisions was was set to three, 109 00:05:58,620 --> 00:06:00,183 ‫which are exactly the three times 110 00:06:00,183 --> 00:06:02,759 ‫that we clicked on a different rating. 111 00:06:02,759 --> 00:06:03,653 ‫Nice. 112 00:06:03,653 --> 00:06:06,671 ‫So let's just recap what we did here 113 00:06:06,671 --> 00:06:09,390 ‫and why this works. 114 00:06:09,390 --> 00:06:11,670 ‫So we created this ref here where we want 115 00:06:11,670 --> 00:06:14,940 ‫to store the amount of clicks that happened on the rating 116 00:06:14,940 --> 00:06:16,645 ‫before the movie is added, 117 00:06:16,645 --> 00:06:19,860 ‫but we don't want to render that information 118 00:06:19,860 --> 00:06:21,443 ‫onto the user interface. 119 00:06:21,443 --> 00:06:25,770 ‫Or in other words, we do not want to create a re-render. 120 00:06:25,770 --> 00:06:29,363 ‫And so that's why a ref is perfect for this. 121 00:06:29,363 --> 00:06:32,580 ‫So then each time the user rating was updated, 122 00:06:32,580 --> 00:06:35,400 ‫the component was re-rendered. 123 00:06:35,400 --> 00:06:39,416 ‫And so then after that re-render, this effect was executed 124 00:06:39,416 --> 00:06:43,297 ‫which means that after the rating had been updated, 125 00:06:43,297 --> 00:06:46,306 ‫then our ref would be updated as well. 126 00:06:46,306 --> 00:06:49,059 ‫So we would update the current property 127 00:06:49,059 --> 00:06:50,916 ‫to simply adding one. 128 00:06:50,916 --> 00:06:54,153 ‫So we can actually make this a bit simpler. 129 00:06:55,565 --> 00:06:59,193 ‫So just like this, or even, 130 00:06:59,193 --> 00:07:01,070 ‫could even do this. 131 00:07:01,070 --> 00:07:03,884 ‫So this works just in the exact same way. 132 00:07:03,884 --> 00:07:08,723 ‫And so then we just used the countRef dot current property 133 00:07:08,723 --> 00:07:13,680 ‫later down here whenever we create a new object 134 00:07:13,680 --> 00:07:15,633 ‫to be added to our list. 135 00:07:17,160 --> 00:07:20,040 ‫Now of course, if we tried to do the same thing 136 00:07:20,040 --> 00:07:23,641 ‫with a regular variable, then that wouldn't work. 137 00:07:23,641 --> 00:07:25,409 ‫So let's try that also. 138 00:07:25,409 --> 00:07:27,870 ‫Let's say count. 139 00:07:27,870 --> 00:07:31,230 ‫So just count equal zero. 140 00:07:31,230 --> 00:07:35,682 ‫And then, so let's just do the same thing here. 141 00:07:35,682 --> 00:07:40,682 ‫So if user rating, then count plus plus. 142 00:07:43,013 --> 00:07:45,149 ‫And then here we also need to add count 143 00:07:45,149 --> 00:07:47,943 ‫which for a ref we do not. 144 00:07:49,222 --> 00:07:52,432 ‫And then let's just add that count here. 145 00:07:52,432 --> 00:07:56,324 ‫So then we will see that this doesn't work. 146 00:07:56,324 --> 00:07:57,847 ‫So let's reload. 147 00:07:57,847 --> 00:08:01,263 ‫Let's empty this entire thing. 148 00:08:04,752 --> 00:08:09,686 ‫Okay, so clicking 1, 2, 3, 4 times now, 149 00:08:09,686 --> 00:08:11,288 ‫add to the list. 150 00:08:11,288 --> 00:08:15,166 ‫And then again we come here to the state. 151 00:08:15,166 --> 00:08:17,386 ‫So once again, really, really helpful 152 00:08:17,386 --> 00:08:20,827 ‫to have these dev tools. 153 00:08:20,827 --> 00:08:25,401 ‫And then we see that we have four countRatingDecisions, 154 00:08:25,401 --> 00:08:28,460 ‫but the count here is only at one. 155 00:08:28,460 --> 00:08:31,519 ‫And so this one is basically just the last click 156 00:08:31,519 --> 00:08:32,883 ‫that happened. 157 00:08:33,765 --> 00:08:37,600 ‫So the let variable, which is just a simple variable, 158 00:08:37,600 --> 00:08:42,000 ‫is of course reset after every re-render. 159 00:08:42,000 --> 00:08:44,490 ‫So it's always going back to zero. 160 00:08:44,490 --> 00:08:46,851 ‫And so then when the last click happened 161 00:08:46,851 --> 00:08:49,620 ‫that zero was here, increase to one 162 00:08:49,620 --> 00:08:52,265 ‫and then that count was added to the object. 163 00:08:52,265 --> 00:08:56,850 ‫So in conclusion, this normal variable is not persistent 164 00:08:56,850 --> 00:09:00,181 ‫across renders, and it doesn't trigger a re-render. 165 00:09:00,181 --> 00:09:01,650 ‫On the other extreme, 166 00:09:01,650 --> 00:09:05,220 ‫we have state which does both of these things. 167 00:09:05,220 --> 00:09:08,041 ‫So triggers a re-render and it is persistent. 168 00:09:08,041 --> 00:09:10,950 ‫And then in the middle we have a ref 169 00:09:10,950 --> 00:09:13,562 ‫which is indeed persisted across renders 170 00:09:13,562 --> 00:09:17,521 ‫but it does not trigger a re-render when updated. 171 00:09:17,521 --> 00:09:20,778 ‫And so that's why we normally don't use a ref 172 00:09:20,778 --> 00:09:23,290 ‫in the JSX output. 173 00:09:23,290 --> 00:09:24,587 ‫All right. 174 00:09:24,587 --> 00:09:27,911 ‫So this was really just to drive home the message 175 00:09:27,911 --> 00:09:30,349 ‫how refs are different 176 00:09:30,349 --> 00:09:35,349 ‫from both states and also from normal variables. 177 00:09:36,333 --> 00:09:38,103 ‫Okay. 178 00:09:39,660 --> 00:09:42,303 ‫Now, we still have some problem. 179 00:09:43,420 --> 00:09:44,572 ‫We still have to count. 180 00:09:44,572 --> 00:09:46,183 ‫Ah, here it is. 181 00:09:46,183 --> 00:09:48,876 ‫So forgot to delete this one. 182 00:09:48,876 --> 00:09:52,581 ‫Okay, and later on we will even see some other 183 00:09:52,581 --> 00:09:57,060 ‫more real world use cases of refs, for example, 184 00:09:57,060 --> 00:09:59,847 ‫storing the ID of a timer to stop it. 185 00:09:59,847 --> 00:10:02,460 ‫But for now, I hope that this use case 186 00:10:02,460 --> 00:10:04,979 ‫of a ref also made sense to you. 187 00:10:04,979 --> 00:10:07,835 ‫And we don't use refs all the time 188 00:10:07,835 --> 00:10:10,560 ‫but it's still good to know how they work 189 00:10:10,560 --> 00:10:12,963 ‫and to keep them in the back of your mind.