1 00:00:01,110 --> 00:00:03,360 ‫It's very common that we update 2 00:00:03,360 --> 00:00:08,100 ‫a state variable based on the current value of that state. 3 00:00:08,100 --> 00:00:11,103 ‫And so, let's now learn how to best do that. 4 00:00:12,750 --> 00:00:16,470 ‫And in fact, we are updating state based on 5 00:00:16,470 --> 00:00:19,110 ‫the current state all the time here. 6 00:00:19,110 --> 00:00:23,460 ‫So here, for example, in said step, we take the current step 7 00:00:23,460 --> 00:00:25,620 ‫and then subtract one. 8 00:00:25,620 --> 00:00:27,330 ‫And here, the same. 9 00:00:27,330 --> 00:00:30,365 ‫So, here we take the current is open state 10 00:00:30,365 --> 00:00:32,400 ‫and toggle it, basically. 11 00:00:32,400 --> 00:00:35,526 ‫And so, this is what I mean with updating state based 12 00:00:35,526 --> 00:00:37,680 ‫on the current state. 13 00:00:37,680 --> 00:00:39,930 ‫Now, the way we are doing it right now 14 00:00:39,930 --> 00:00:42,780 ‫is working just fine, right? 15 00:00:42,780 --> 00:00:45,813 ‫So, our app works fine, but now let's imagine that 16 00:00:45,813 --> 00:00:49,250 ‫after a few months, we come back to this app 17 00:00:49,250 --> 00:00:52,080 ‫and then we want to change something. 18 00:00:52,080 --> 00:00:55,920 ‫So, let's say that we want this handle next function here 19 00:00:55,920 --> 00:00:58,258 ‫to actually move forward twice. 20 00:00:58,258 --> 00:01:03,258 ‫So, let's say that we want to set the step state twice. 21 00:01:05,280 --> 00:01:08,073 ‫So, there's nothing stopping us from doing that. 22 00:01:09,690 --> 00:01:12,363 ‫So, we can do this once and duplicate it. 23 00:01:13,290 --> 00:01:14,760 ‫So, this is perfectly fine. 24 00:01:14,760 --> 00:01:16,863 ‫We can call the same function twice. 25 00:01:18,060 --> 00:01:20,040 ‫But what? What happens now? 26 00:01:20,040 --> 00:01:21,641 ‫So, what do you think is going to happen 27 00:01:21,641 --> 00:01:24,150 ‫when I click next now? 28 00:01:24,150 --> 00:01:26,730 ‫So, in theory, it should take the step, 29 00:01:26,730 --> 00:01:30,450 ‫which is currently one, at one, so two, 30 00:01:30,450 --> 00:01:32,160 ‫and then here it should do the same 31 00:01:32,160 --> 00:01:34,350 ‫from two to three, right? 32 00:01:34,350 --> 00:01:36,153 ‫But again, watch what happens. 33 00:01:37,350 --> 00:01:40,590 ‫So, it only updated the state once. 34 00:01:40,590 --> 00:01:44,640 ‫Now, we will go into detail why exactly this happens. 35 00:01:44,640 --> 00:01:46,680 ‫But for now, what I need you to know is 36 00:01:46,680 --> 00:01:48,629 ‫that we should not update state based 37 00:01:48,629 --> 00:01:51,450 ‫on the current state like this. 38 00:01:51,450 --> 00:01:53,850 ‫So, the way that we have been doing it. 39 00:01:53,850 --> 00:01:56,100 ‫Instead, what we should do is to pass 40 00:01:56,100 --> 00:01:58,200 ‫in a callback function here. 41 00:01:58,200 --> 00:02:00,412 ‫So instead of a value, we pass a function, 42 00:02:00,412 --> 00:02:02,721 ‫which will receive as the argument, 43 00:02:02,721 --> 00:02:05,249 ‫the current value of the state. 44 00:02:05,249 --> 00:02:09,148 ‫So, let's remove this here and let's create a function, 45 00:02:09,148 --> 00:02:13,530 ‫and I will just create a simple arrow function here. 46 00:02:13,530 --> 00:02:16,950 ‫And so as I was saying, this will receive, as an input, 47 00:02:16,950 --> 00:02:19,440 ‫the current value of the state. 48 00:02:19,440 --> 00:02:21,630 ‫Now, there are multiple conventions on how 49 00:02:21,630 --> 00:02:23,490 ‫to call this argument. 50 00:02:23,490 --> 00:02:27,030 ‫So, we could again call it step, 51 00:02:27,030 --> 00:02:29,144 ‫but this might then be a bit confusing. 52 00:02:29,144 --> 00:02:34,144 ‫We can call it the current step, for example, or just S. 53 00:02:35,160 --> 00:02:37,380 ‫And so this is what I'm going to do now. 54 00:02:37,380 --> 00:02:39,630 ‫So, just an abbreviation. 55 00:02:39,630 --> 00:02:44,010 ‫And so then, here we can do S minus one, just like before. 56 00:02:44,010 --> 00:02:48,092 ‫And so this will now work the exact same way, right? 57 00:02:48,092 --> 00:02:51,644 ‫So, the view here was updated in the same way as before, 58 00:02:51,644 --> 00:02:54,010 ‫but this is a little bit more correct, 59 00:02:54,010 --> 00:02:56,223 ‫because if we do this here, 60 00:02:58,350 --> 00:03:02,430 ‫so again, receiving the current step as an input, 61 00:03:02,430 --> 00:03:05,793 ‫which we just call S, but it could be called anything. 62 00:03:08,100 --> 00:03:12,060 ‫And so then here we return that current step plus one 63 00:03:12,060 --> 00:03:16,320 ‫and the same here, plus one. 64 00:03:16,320 --> 00:03:21,320 ‫And so if we run this again, then it works. 65 00:03:21,390 --> 00:03:24,093 ‫So then, it is updating the state twice. 66 00:03:25,170 --> 00:03:28,080 ‫So, it started at one, then, therefore, 67 00:03:28,080 --> 00:03:30,990 ‫this callback here received the value of one, 68 00:03:30,990 --> 00:03:32,700 ‫and then one plus one was two. 69 00:03:32,700 --> 00:03:34,770 ‫And then here in the next state up, 70 00:03:34,770 --> 00:03:37,800 ‫that updated value is already passed here 71 00:03:37,800 --> 00:03:38,880 ‫into this callback. 72 00:03:38,880 --> 00:03:41,940 ‫And so then we have two plus one, which makes three. 73 00:03:41,940 --> 00:03:45,450 ‫Now, here we actually do not want this, of course, 74 00:03:45,450 --> 00:03:48,090 ‫so we just want to move forwards by one. 75 00:03:48,090 --> 00:03:50,424 ‫But in order to be safe for future updates, 76 00:03:50,424 --> 00:03:54,081 ‫it's a good idea to always use a callback like this 77 00:03:54,081 --> 00:03:57,747 ‫when we want to update state based on the current value 78 00:03:57,747 --> 00:03:59,490 ‫of that state. 79 00:03:59,490 --> 00:04:01,263 ‫So, let's do the same here. 80 00:04:02,160 --> 00:04:04,860 ‫So again, here we are also doing the same. 81 00:04:04,860 --> 00:04:08,160 ‫So, we are also setting this open state based 82 00:04:08,160 --> 00:04:09,213 ‫on the current one. 83 00:04:10,740 --> 00:04:15,740 ‫So, let's just call it S and then toggle that now, right? 84 00:04:19,410 --> 00:04:21,724 ‫And that works beautifully. 85 00:04:21,724 --> 00:04:24,660 ‫Now, when we're not setting state based 86 00:04:24,660 --> 00:04:27,840 ‫on the current state, then of course we can just pass 87 00:04:27,840 --> 00:04:29,430 ‫in the value as normal. 88 00:04:29,430 --> 00:04:32,190 ‫So, just like we did here, for example. 89 00:04:32,190 --> 00:04:34,230 ‫So, that also happens sometimes. 90 00:04:34,230 --> 00:04:37,050 ‫And so in that case, we need no callback. 91 00:04:37,050 --> 00:04:39,639 ‫Then, we just pass in the new state value, 92 00:04:39,639 --> 00:04:43,721 ‫as we do here, and as we also had here previously. 93 00:04:43,721 --> 00:04:47,703 ‫So again, in many situations, that would work just fine. 94 00:04:48,540 --> 00:04:52,290 ‫So, before we only had the S minus one here 95 00:04:52,290 --> 00:04:54,830 ‫and nothing else and so that worked as well. 96 00:04:54,830 --> 00:04:57,493 ‫But in order to be safe for future updates 97 00:04:57,493 --> 00:05:02,493 ‫or for working with coworkers, it's best to update the state 98 00:05:03,240 --> 00:05:05,820 ‫in a more safe way like this. 99 00:05:05,820 --> 00:05:08,248 ‫And so from now on, I will do this each time 100 00:05:08,248 --> 00:05:12,270 ‫that we update the state based on the current value 101 00:05:12,270 --> 00:05:13,143 ‫of the state.