1 00:00:02,300 --> 00:00:04,490 We know how React manages state, 2 00:00:04,490 --> 00:00:06,300 or at least we have an idea. 3 00:00:06,300 --> 00:00:08,030 But there's one thing which is important, 4 00:00:08,030 --> 00:00:09,690 which I mentioned before, 5 00:00:09,690 --> 00:00:11,450 but which I now wanna emphasize again. 6 00:00:11,450 --> 00:00:15,300 And that is how React handles state updates. 7 00:00:15,300 --> 00:00:18,060 In your code, you might have a component 8 00:00:18,060 --> 00:00:20,660 and in that component, you might manage some state 9 00:00:20,660 --> 00:00:22,770 with the help of the useState hook, 10 00:00:22,770 --> 00:00:26,290 and therefore React manages that state for you. 11 00:00:26,290 --> 00:00:27,630 Let's say the initial state 12 00:00:27,630 --> 00:00:30,570 for this product component is DVD. 13 00:00:30,570 --> 00:00:32,593 So we have a DVD as a product here. 14 00:00:34,830 --> 00:00:38,900 Now eventually, because a user clicked a button or whatever, 15 00:00:38,900 --> 00:00:42,130 in that component we update that state. 16 00:00:42,130 --> 00:00:44,270 For example, with SetNewProduct, 17 00:00:44,270 --> 00:00:46,580 that could be our state updating function 18 00:00:46,580 --> 00:00:48,450 returned by the useState hook 19 00:00:48,450 --> 00:00:52,943 and we set the new product to book, so from DVD to book. 20 00:00:53,930 --> 00:00:58,930 Now what happens with that is not that DVD is instantly 21 00:00:59,177 --> 00:01:03,830 after SetNewProduct finishes execution is replaced. 22 00:01:03,830 --> 00:01:05,700 DVD is not instantly replaced 23 00:01:05,700 --> 00:01:08,870 just because SetNewProduct is done running. 24 00:01:08,870 --> 00:01:11,460 Instead, calling SetNewProduct, 25 00:01:11,460 --> 00:01:15,240 and calling those state updating functions in general 26 00:01:15,240 --> 00:01:19,393 schedules a state update with the data book. 27 00:01:20,310 --> 00:01:23,560 But that's now a scheduled state change, 28 00:01:23,560 --> 00:01:27,220 React is aware of it, React plans on processing it, 29 00:01:27,220 --> 00:01:30,600 React doesn't process that immediately though. 30 00:01:30,600 --> 00:01:34,260 Now in reality most of the time, state changes, 31 00:01:34,260 --> 00:01:38,690 scheduled state changes will be processed very fast, 32 00:01:38,690 --> 00:01:39,930 pretty much instantly. 33 00:01:39,930 --> 00:01:42,850 So in reality, it might feel instant. 34 00:01:42,850 --> 00:01:46,230 If we click a button and dad removes a paragraph 35 00:01:46,230 --> 00:01:49,770 to us as a human, that happens instantly. 36 00:01:49,770 --> 00:01:51,560 But React reserves the right 37 00:01:51,560 --> 00:01:54,120 of actually postponing that state change. 38 00:01:54,120 --> 00:01:54,953 For example, 39 00:01:54,953 --> 00:01:57,770 because a lot of other performance intensive tasks 40 00:01:57,770 --> 00:01:59,570 are going on at the same moment, 41 00:01:59,570 --> 00:02:01,380 potentially it asks that, 42 00:02:01,380 --> 00:02:04,720 React considers to have a higher priority. 43 00:02:04,720 --> 00:02:07,210 Let's say on your screen, you have a input field 44 00:02:07,210 --> 00:02:09,590 where the user is able to type something. 45 00:02:09,590 --> 00:02:13,530 Reacting to that user input would have a higher priority 46 00:02:13,530 --> 00:02:16,440 than changing some text on the screen. 47 00:02:16,440 --> 00:02:17,930 And for reasons like that, 48 00:02:17,930 --> 00:02:22,070 React might postpone scheduled state changes. 49 00:02:22,070 --> 00:02:23,810 Now, what React does is, 50 00:02:23,810 --> 00:02:26,890 it guarantees you that the order of state changes 51 00:02:26,890 --> 00:02:30,460 for one in the same type of state is guaranteed. 52 00:02:30,460 --> 00:02:32,630 So if we call set new product again 53 00:02:32,630 --> 00:02:36,510 and we set this to, let's say, carpet or whatever, 54 00:02:36,510 --> 00:02:40,380 then this state change would not be performed 55 00:02:40,380 --> 00:02:41,860 before the previous state change. 56 00:02:41,860 --> 00:02:43,480 So the order is kept, 57 00:02:43,480 --> 00:02:46,200 but it's not necessarily executed immediately. 58 00:02:46,200 --> 00:02:48,400 Eventually of course it will be processed 59 00:02:48,400 --> 00:02:50,090 and your new state will be "Book." 60 00:02:50,090 --> 00:02:52,240 And once that new state is active, 61 00:02:52,240 --> 00:02:54,800 once that state change was processed, 62 00:02:54,800 --> 00:02:56,950 React will reevaluate the component, 63 00:02:56,950 --> 00:02:59,270 it will re-run the component function. 64 00:02:59,270 --> 00:03:01,450 Now, because of that scheduling 65 00:03:01,450 --> 00:03:04,670 where of course you might have multiple outstanding 66 00:03:04,670 --> 00:03:07,420 scheduled state changes at the same time, 67 00:03:07,420 --> 00:03:08,770 because of that, 68 00:03:08,770 --> 00:03:12,610 because multiple updates can be scheduled at the same time, 69 00:03:12,610 --> 00:03:14,160 because of that, 70 00:03:14,160 --> 00:03:18,440 it is recommended that you use this function form 71 00:03:18,440 --> 00:03:19,880 for updating your state 72 00:03:19,880 --> 00:03:22,920 if you depend on the previous state snapshot. 73 00:03:22,920 --> 00:03:25,960 In a lot of cases, this will probably not matter 74 00:03:25,960 --> 00:03:28,270 because it's processed so quickly 75 00:03:28,270 --> 00:03:32,150 that you can't even click fast enough to see a delay 76 00:03:32,150 --> 00:03:35,350 but because it theoretically could be postponed, 77 00:03:35,350 --> 00:03:38,140 this is the safe way of ensuring 78 00:03:38,140 --> 00:03:41,070 that state changes are processed in order 79 00:03:41,070 --> 00:03:42,520 and for every state change 80 00:03:42,520 --> 00:03:44,580 where you depend on the previous state, 81 00:03:44,580 --> 00:03:46,483 you get the latest state. 82 00:03:47,400 --> 00:03:49,880 Otherwise you might just get the latest state 83 00:03:49,880 --> 00:03:52,440 when the component function was executed last, 84 00:03:52,440 --> 00:03:55,110 which is not necessarily the same state 85 00:03:55,110 --> 00:03:58,580 as if the state changes are executed in order. 86 00:03:58,580 --> 00:04:01,230 Because if you have multiple outstanding state changes, 87 00:04:01,230 --> 00:04:04,930 they all come from the same last re-render cycle 88 00:04:04,930 --> 00:04:06,560 of that app component. 89 00:04:06,560 --> 00:04:10,300 They all come from the last component snapshot, 90 00:04:10,300 --> 00:04:12,100 but of course, if they were processed, 91 00:04:12,100 --> 00:04:14,180 the component would re-render in between 92 00:04:14,180 --> 00:04:16,690 but since they're all already scheduled, 93 00:04:16,690 --> 00:04:18,250 all outstanding states changes 94 00:04:18,250 --> 00:04:21,100 don't take that new in-between 95 00:04:21,100 --> 00:04:23,680 component result into account. 96 00:04:23,680 --> 00:04:25,700 That's why this function form is helpful 97 00:04:25,700 --> 00:04:28,470 because there React will actually ensure 98 00:04:28,470 --> 00:04:30,470 that for every outstanding state change, 99 00:04:30,470 --> 00:04:33,360 it looks into the latest state and gives you that 100 00:04:33,360 --> 00:04:35,360 and does not use the latest state 101 00:04:35,360 --> 00:04:37,910 from the last time the component was re rendered. 102 00:04:37,910 --> 00:04:39,400 That's an important difference 103 00:04:39,400 --> 00:04:41,370 between when the component was re-rendered 104 00:04:41,370 --> 00:04:43,723 and when a state change was scheduled. 105 00:04:45,070 --> 00:04:47,560 You can have multiple outstanding state changes 106 00:04:47,560 --> 00:04:50,780 from one and the same component re-evaluation. 107 00:04:50,780 --> 00:04:55,300 That's the key takeaway here and that's why this matters. 108 00:04:55,300 --> 00:05:00,300 That's also why in the last non project module, 109 00:05:00,720 --> 00:05:03,390 where we initially learned about use of fact and so on 110 00:05:03,390 --> 00:05:07,360 it was safe to actually update our form validity 111 00:05:07,360 --> 00:05:10,500 based on the email and password is valid states 112 00:05:10,500 --> 00:05:12,260 instead of use effect, 113 00:05:12,260 --> 00:05:14,480 because just like using the function form 114 00:05:14,480 --> 00:05:17,820 for updating a state based on a previous state snapshot, 115 00:05:17,820 --> 00:05:22,140 useEffect actually because of its dependency mechanism 116 00:05:22,140 --> 00:05:25,930 is ensured to rerun the effect here 117 00:05:25,930 --> 00:05:30,930 every time a state or a value which is a dependency changed. 118 00:05:31,450 --> 00:05:34,750 And therefore you can't miss outstanding state changes 119 00:05:34,750 --> 00:05:37,180 because here it will simply rerun this effect 120 00:05:37,180 --> 00:05:39,990 for every time to component was re executed 121 00:05:39,990 --> 00:05:42,080 the component function was re executed. 122 00:05:42,080 --> 00:05:44,050 It will thereafter always rerun the effect 123 00:05:44,050 --> 00:05:45,970 and therefore you are also guaranteed 124 00:05:45,970 --> 00:05:48,763 to get the latest state when doing it like this. 125 00:05:50,250 --> 00:05:52,190 So these are simply two different patterns 126 00:05:52,190 --> 00:05:55,650 for dealing with one at the same problem you could say, 127 00:05:55,650 --> 00:05:57,740 depending on what you're trying achieve. 128 00:05:57,740 --> 00:05:59,360 Here we want to state updates 129 00:05:59,360 --> 00:06:01,470 that depends on some other states. 130 00:06:01,470 --> 00:06:03,720 In this case, on the other hand we want a state update 131 00:06:03,720 --> 00:06:05,550 that depends on the same state 132 00:06:05,550 --> 00:06:08,810 just a previous snapshot of that state. 133 00:06:08,810 --> 00:06:10,900 So that state updates scheduling 134 00:06:10,900 --> 00:06:13,340 is a mechanism you have to keep in mind, 135 00:06:13,340 --> 00:06:17,080 not because you actively need to do something about that, 136 00:06:17,080 --> 00:06:20,520 React manages those scheduled updates for you, 137 00:06:20,520 --> 00:06:23,350 but because you need to write your code accordingly 138 00:06:23,350 --> 00:06:28,350 to rule out any danger of potentially working without data 139 00:06:28,500 --> 00:06:30,250 you rule it out when using that, 140 00:06:30,250 --> 00:06:32,450 you rule it out when working with useEffect. 141 00:06:33,820 --> 00:06:36,390 Now, there is another important thing you need to know 142 00:06:36,390 --> 00:06:38,930 about state in react. 143 00:06:38,930 --> 00:06:41,940 There, we actually have this nav context 144 00:06:41,940 --> 00:06:44,860 and in the navigate handler I do something which you see 145 00:06:44,860 --> 00:06:47,230 a couple of times throughout this course. 146 00:06:47,230 --> 00:06:51,040 I call two state updating functions after each other. 147 00:06:51,040 --> 00:06:52,360 Now we just learned 148 00:06:52,360 --> 00:06:55,360 that just because you call such a function 149 00:06:55,360 --> 00:06:57,800 does not mean that in the very next line 150 00:06:57,800 --> 00:06:59,460 the state was updated. 151 00:06:59,460 --> 00:07:02,010 State was not updated here. 152 00:07:02,010 --> 00:07:05,030 Instead, we just learned that the update will be scheduled 153 00:07:05,030 --> 00:07:07,510 and eventually the entire component will rerun. 154 00:07:07,510 --> 00:07:09,280 So this component in this case 155 00:07:09,280 --> 00:07:11,730 and then once this component rerun 156 00:07:11,730 --> 00:07:14,090 then we have the latest state available. 157 00:07:14,090 --> 00:07:15,770 Not earlier. 158 00:07:15,770 --> 00:07:17,180 That's what we learned. 159 00:07:17,180 --> 00:07:18,020 Now here however, 160 00:07:18,020 --> 00:07:21,480 we have two state updating functions after each other. 161 00:07:21,480 --> 00:07:25,990 That clearly means that two state updates will be scheduled. 162 00:07:25,990 --> 00:07:27,700 Does this, however, 163 00:07:27,700 --> 00:07:32,030 also mean that the component will be re-executed, 164 00:07:32,030 --> 00:07:34,550 re-evaluated twice. 165 00:07:34,550 --> 00:07:35,940 You could imagine that this happens 166 00:07:35,940 --> 00:07:38,520 but that's actually not what React does here. 167 00:07:38,520 --> 00:07:41,540 Instead, if you have two state updates 168 00:07:41,540 --> 00:07:45,300 in the same synchronous code snippet after each other. 169 00:07:45,300 --> 00:07:48,270 So not in a promise in different than blocks 170 00:07:48,270 --> 00:07:50,810 but in the same function, for example, 171 00:07:50,810 --> 00:07:53,520 where nothing in between would cause a time delay 172 00:07:53,520 --> 00:07:54,640 or anything like that. 173 00:07:54,640 --> 00:07:56,440 So if you have two synchronous lines 174 00:07:57,380 --> 00:07:58,213 of code after each other, 175 00:07:58,213 --> 00:08:01,570 where you would then call a state updating function 176 00:08:01,570 --> 00:08:06,410 in such cases, React will batch those state updates together 177 00:08:07,380 --> 00:08:10,100 in one long synchronous process, 178 00:08:10,100 --> 00:08:13,460 so for example, in one function that executes start to end 179 00:08:13,460 --> 00:08:16,260 without any callbacks or promises in between, 180 00:08:16,260 --> 00:08:20,160 in such cases React will take all the state updates 181 00:08:20,160 --> 00:08:22,310 that are produced by that function 182 00:08:22,310 --> 00:08:26,480 and it will batch them together into one state update. 183 00:08:26,480 --> 00:08:27,980 So back in this picture, 184 00:08:27,980 --> 00:08:31,540 even if we would not just update the new product here, 185 00:08:31,540 --> 00:08:33,760 but if we would update something totally different 186 00:08:33,760 --> 00:08:35,280 in the same function, 187 00:08:35,280 --> 00:08:38,600 we would still just have one scheduled state change 188 00:08:38,600 --> 00:08:41,860 which then however, just changes two different states. 189 00:08:41,860 --> 00:08:43,020 But it's one process. 190 00:08:43,020 --> 00:08:44,800 It's not two scheduled changes 191 00:08:44,800 --> 00:08:49,640 with two upcoming component, re-executions re-evaluations, 192 00:08:49,640 --> 00:08:52,200 but instead it's one scheduled change 193 00:08:52,200 --> 00:08:53,580 where all the different states 194 00:08:53,580 --> 00:08:57,090 you might want to effect are simply batched together. 195 00:08:57,090 --> 00:09:00,050 So state batching is another important concept 196 00:09:00,050 --> 00:09:02,713 you have to be aware of when working with react.