1 00:00:01,080 --> 00:00:04,020 ‫We have already used a few different React hooks 2 00:00:04,020 --> 00:00:06,960 ‫at this point of the course, but we have never 3 00:00:06,960 --> 00:00:10,470 ‫really learned what a React hook actually is 4 00:00:10,470 --> 00:00:12,060 ‫and how they work. 5 00:00:12,060 --> 00:00:15,603 ‫And so let's now do that in this lecture. 6 00:00:17,400 --> 00:00:21,180 ‫So React hooks are essentially special functions 7 00:00:21,180 --> 00:00:24,840 ‫that are built into React and which allow us 8 00:00:24,840 --> 00:00:29,840 ‫to basically hook into some of React's internal mechanisms, 9 00:00:30,120 --> 00:00:33,990 ‫or in other words, hooks are basically APIs 10 00:00:33,990 --> 00:00:37,530 ‫that expose some internal React functionality, 11 00:00:37,530 --> 00:00:42,030 ‫such as creating and accessing state from the fiber tree, 12 00:00:42,030 --> 00:00:46,440 ‫or registering side effects in the fiber tree, as well. 13 00:00:46,440 --> 00:00:51,240 ‫So again, the fiber tree is somewhere deep inside React, 14 00:00:51,240 --> 00:00:54,630 ‫and usually not accessible to us at all. 15 00:00:54,630 --> 00:00:57,536 ‫But using the useState or the useEffect hook, 16 00:00:57,536 --> 00:01:02,536 ‫we can essentially hook into that internal mechanism. 17 00:01:02,670 --> 00:01:05,730 ‫Now, hooks also allow us to manually select 18 00:01:05,730 --> 00:01:08,580 ‫in-store dom notes access context, 19 00:01:08,580 --> 00:01:11,202 ‫and many, many other things. 20 00:01:11,202 --> 00:01:15,600 ‫Now, what all hooks have in common is that they all start 21 00:01:15,600 --> 00:01:19,500 ‫with the word "use," in order to make it easy for us, 22 00:01:19,500 --> 00:01:21,840 ‫and for React to distinguish hooks 23 00:01:21,840 --> 00:01:24,540 ‫from other regular functions. 24 00:01:24,540 --> 00:01:28,110 ‫And in fact, we can even create our own so-called 25 00:01:28,110 --> 00:01:32,580 ‫custom hooks, which will also start with the word "use." 26 00:01:32,580 --> 00:01:35,550 ‫And this is actually one of the greatest things 27 00:01:35,550 --> 00:01:38,820 ‫about hooks in general, because custom hooks 28 00:01:38,820 --> 00:01:43,820 ‫give us developers an easy way of reusing non-visual logic. 29 00:01:44,430 --> 00:01:48,060 ‫So logic that is not about the UI. 30 00:01:48,060 --> 00:01:50,730 ‫Now, you might be aware of this or not, 31 00:01:50,730 --> 00:01:54,420 ‫but there was a time when we had to use components based 32 00:01:54,420 --> 00:01:58,680 ‫on JavaScript classes if we wanted to give components state 33 00:01:58,680 --> 00:02:01,860 ‫and access to the component life cycle. 34 00:02:01,860 --> 00:02:04,380 ‫However, this came with a few problems, 35 00:02:04,380 --> 00:02:07,680 ‫which led the React team to introduce hooks. 36 00:02:07,680 --> 00:02:11,070 ‫And so now with hooks, our components based 37 00:02:11,070 --> 00:02:13,890 ‫on functions can have their own state, 38 00:02:13,890 --> 00:02:16,440 ‫and also run side effects. 39 00:02:16,440 --> 00:02:20,370 ‫And so this was a huge step forward for React, 40 00:02:20,370 --> 00:02:24,211 ‫and made it even more popular than it already was. 41 00:02:24,211 --> 00:02:28,260 ‫Now we only used two hooks so far, 42 00:02:28,260 --> 00:02:32,370 ‫but React actually comes with almost 20 built-in hooks. 43 00:02:32,370 --> 00:02:35,970 ‫And so let's get a quick overview of them here. 44 00:02:35,970 --> 00:02:39,360 ‫So useState and useEffect are, of course, 45 00:02:39,360 --> 00:02:41,400 ‫some of the most important hooks, 46 00:02:41,400 --> 00:02:44,040 ‫and therefore the most used ones, 47 00:02:44,040 --> 00:02:47,490 ‫along with useReducer and useContext, 48 00:02:47,490 --> 00:02:50,850 ‫that we will actually study pretty soon. 49 00:02:50,850 --> 00:02:55,830 ‫Then we have this huge list of some less used hooks, 50 00:02:55,830 --> 00:03:00,030 ‫but where some of them are actually still quite important, 51 00:03:00,030 --> 00:03:04,230 ‫like useRef, useCallback and useMemo. 52 00:03:04,230 --> 00:03:07,350 ‫So some of these are actually worth learning, 53 00:03:07,350 --> 00:03:11,070 ‫but others are a bit more obscure, I would say. 54 00:03:11,070 --> 00:03:15,660 ‫And so they are not part of the curriculum of this course. 55 00:03:15,660 --> 00:03:19,230 ‫And finally, there are a few hooks that are intended 56 00:03:19,230 --> 00:03:21,420 ‫only for library authors. 57 00:03:21,420 --> 00:03:25,233 ‫And so of course, we will also not bother looking at those. 58 00:03:26,550 --> 00:03:30,390 ‫Now, in order for hooks to actually work as intended, 59 00:03:30,390 --> 00:03:33,540 ‫there are two very simple rules of hooks 60 00:03:33,540 --> 00:03:35,880 ‫that we must follow. 61 00:03:35,880 --> 00:03:39,090 ‫The first rule is that hooks can only be called 62 00:03:39,090 --> 00:03:41,700 ‫at the top level in practice. 63 00:03:41,700 --> 00:03:45,720 ‫This means that we cannot call hooks inside conditionals, 64 00:03:45,720 --> 00:03:49,680 ‫like if statements, and also not inside loops 65 00:03:49,680 --> 00:03:52,830 ‫or functions nested inside the component. 66 00:03:52,830 --> 00:03:57,030 ‫We can also not call hooks after an early return, 67 00:03:57,030 --> 00:04:00,690 ‫because that's also similar to a condition. 68 00:04:00,690 --> 00:04:01,770 ‫But why? 69 00:04:01,770 --> 00:04:04,033 ‫Why is this such an important rule? 70 00:04:04,033 --> 00:04:08,580 ‫Well, it's because hooks only work if they are always called 71 00:04:08,580 --> 00:04:12,300 ‫in the exact same order, which can only be insured 72 00:04:12,300 --> 00:04:15,300 ‫if we only call them at the top level. 73 00:04:15,300 --> 00:04:19,260 ‫And we will look at this in more detail in the next slide. 74 00:04:19,260 --> 00:04:23,280 ‫And now the second rule is actually a bit simpler. 75 00:04:23,280 --> 00:04:26,460 ‫All it says is that hooks can only be called 76 00:04:26,460 --> 00:04:28,770 ‫from React functions. 77 00:04:28,770 --> 00:04:32,010 ‫In practice, this means that hooks can only be called 78 00:04:32,010 --> 00:04:35,610 ‫from function components or from custom hooks, 79 00:04:35,610 --> 00:04:39,903 ‫but not from regular functions or even class components. 80 00:04:40,740 --> 00:04:44,520 ‫Now, the great news is that you actually won't have to worry 81 00:04:44,520 --> 00:04:48,000 ‫about these rules at all if you're using a linter, 82 00:04:48,000 --> 00:04:51,510 ‫because these two rules are automatically enforced 83 00:04:51,510 --> 00:04:54,240 ‫by React's ESLint rules. 84 00:04:54,240 --> 00:04:57,573 ‫So you really won't be allowed to break these rules, 85 00:04:58,589 --> 00:05:01,620 ‫even if you try, like we will in the next video. 86 00:05:01,620 --> 00:05:06,240 ‫So if you want, you can actually just forget about the rules 87 00:05:06,240 --> 00:05:08,370 ‫and finish the video right here. 88 00:05:08,370 --> 00:05:11,280 ‫But if you're curious about the deeper reason 89 00:05:11,280 --> 00:05:15,240 ‫why React needs rule number one, then let's move on 90 00:05:15,240 --> 00:05:18,123 ‫to the final slide of this lecture. 91 00:05:20,250 --> 00:05:23,250 ‫So let's now try to answer the question of 92 00:05:23,250 --> 00:05:26,520 ‫why do hooks need to be called in the same order 93 00:05:26,520 --> 00:05:28,290 ‫on every render? 94 00:05:28,290 --> 00:05:31,440 ‫And let's actually start from the very beginning, 95 00:05:31,440 --> 00:05:34,112 ‫based on all the knowledge that we already have 96 00:05:34,112 --> 00:05:35,583 ‫at this point. 97 00:05:36,660 --> 00:05:40,260 ‫So remember that whenever an application is rendered, 98 00:05:40,260 --> 00:05:43,770 ‫React creates a tree of React elements, 99 00:05:43,770 --> 00:05:46,440 ‫also called the virtual dom. 100 00:05:46,440 --> 00:05:50,670 ‫On the initial render, React also builds a fiber tree 101 00:05:50,670 --> 00:05:54,783 ‫out of the virtual dom, where each element is a fiber. 102 00:05:55,620 --> 00:05:59,130 ‫Now, each of these fibers contains a lot of stuff, 103 00:05:59,130 --> 00:06:02,190 ‫like the received props, a list of work, 104 00:06:02,190 --> 00:06:06,570 ‫and crucially for us, a linked list of all the hooks 105 00:06:06,570 --> 00:06:09,750 ‫that were used in the component instance. 106 00:06:09,750 --> 00:06:13,320 ‫So to understand how hooks work behind the scenes, 107 00:06:13,320 --> 00:06:17,040 ‫let's build ourselves a linked list of used hooks, 108 00:06:17,040 --> 00:06:20,490 ‫based on this hypothetical code example. 109 00:06:20,490 --> 00:06:22,350 ‫And I say hypothetical, 110 00:06:22,350 --> 00:06:25,860 ‫because this code actually doesn't work. 111 00:06:25,860 --> 00:06:28,552 ‫And can you spot why that is? 112 00:06:28,552 --> 00:06:29,970 ‫That's right. 113 00:06:29,970 --> 00:06:33,930 ‫This code actually violates the first rule of hooks, 114 00:06:33,930 --> 00:06:37,320 ‫because it conditionally defines state here. 115 00:06:37,320 --> 00:06:41,064 ‫But by breaking this rule, we will understand why hooks rely 116 00:06:41,064 --> 00:06:44,490 ‫on the order in which they were called. 117 00:06:44,490 --> 00:06:49,230 ‫And speaking of this order, our list will be built based 118 00:06:49,230 --> 00:06:52,530 ‫on the call order of the used hooks. 119 00:06:52,530 --> 00:06:57,530 ‫So first this useState call, then another useState call. 120 00:06:57,930 --> 00:07:01,380 ‫And then finally this useEffect call. 121 00:07:01,380 --> 00:07:03,930 ‫So this is our list of hooks 122 00:07:03,930 --> 00:07:06,840 ‫but it's not a linked list yet. 123 00:07:06,840 --> 00:07:09,390 ‫But what does linked actually mean? 124 00:07:09,390 --> 00:07:12,450 ‫Well, it means that the first list element 125 00:07:12,450 --> 00:07:15,480 ‫contains a reference to the second element, 126 00:07:15,480 --> 00:07:19,590 ‫which in turn, has a link to the third list element. 127 00:07:19,590 --> 00:07:22,440 ‫So all the list elements are linked together, 128 00:07:22,440 --> 00:07:25,230 ‫which is actually a common data structure 129 00:07:25,230 --> 00:07:27,240 ‫in computer science. 130 00:07:27,240 --> 00:07:30,720 ‫But anyway, moving back to our code example, 131 00:07:30,720 --> 00:07:33,450 ‫let's now imagine that a re-render happened, 132 00:07:33,450 --> 00:07:38,450 ‫because state A was updated from 23 to 7, 133 00:07:38,850 --> 00:07:42,211 ‫but this now creates a huge problem. 134 00:07:42,211 --> 00:07:46,110 ‫Notice how state B was only created initially 135 00:07:46,110 --> 00:07:51,110 ‫because the condition A equaled 23 was true, right? 136 00:07:51,690 --> 00:07:55,950 ‫However, after this re-render, the condition is now false, 137 00:07:55,950 --> 00:07:59,790 ‫which means that this useState hook would not be called. 138 00:07:59,790 --> 00:08:03,150 ‫And so state B would then no longer exist 139 00:08:03,150 --> 00:08:06,930 ‫in this linked list of hooks after the render. 140 00:08:06,930 --> 00:08:10,168 ‫But what the problem with that, you might ask? 141 00:08:10,168 --> 00:08:14,760 ‫Well, the problem is that the first hook is still pointing 142 00:08:14,760 --> 00:08:18,660 ‫to the original second hook, so to state B, 143 00:08:18,660 --> 00:08:21,494 ‫but that link is now broken. 144 00:08:21,494 --> 00:08:26,494 ‫So state A is now linking to a hook that no longer exists, 145 00:08:26,790 --> 00:08:29,940 ‫and nothing is pointing to the effect of Z, 146 00:08:29,940 --> 00:08:33,750 ‫meaning that a linked list has been destroyed. 147 00:08:33,750 --> 00:08:36,240 ‫It works this way because fibers 148 00:08:36,240 --> 00:08:39,090 ‫are not recreated on every render. 149 00:08:39,090 --> 00:08:42,780 ‫And so this list is also not recreated. 150 00:08:42,780 --> 00:08:46,650 ‫So if one of the hooks just disappears from the list, 151 00:08:46,650 --> 00:08:50,910 ‫then the order of the list will get completely broken. 152 00:08:50,910 --> 00:08:54,360 ‫So in conclusion, if we conditionally use the hook, 153 00:08:54,360 --> 00:08:58,350 ‫like we did here, that will completely mess up the list 154 00:08:58,350 --> 00:09:02,520 ‫of hooks between renders, which will leave React confused 155 00:09:02,520 --> 00:09:07,050 ‫and unable to correctly track all the hooks that were used. 156 00:09:07,050 --> 00:09:10,620 ‫And so this is the reason why hooks need to be called 157 00:09:10,620 --> 00:09:14,100 ‫in the same order on every single render. 158 00:09:14,100 --> 00:09:17,160 ‫And the only way in which we can assure that 159 00:09:17,160 --> 00:09:20,490 ‫is by only calling hooks at the top level, 160 00:09:20,490 --> 00:09:24,720 ‫which is exactly what the first rule of hooks says. 161 00:09:24,720 --> 00:09:29,010 ‫So following this rule, the code and the list of hooks 162 00:09:29,010 --> 00:09:31,650 ‫would look just like this, 163 00:09:31,650 --> 00:09:34,650 ‫so without any conditionals in the code, 164 00:09:34,650 --> 00:09:38,700 ‫and with the list of hooks always in the same order. 165 00:09:38,700 --> 00:09:41,370 ‫Now of course, this opens up the question 166 00:09:41,370 --> 00:09:45,150 ‫of why even bother having this linked list, 167 00:09:45,150 --> 00:09:48,714 ‫if it requires this strange rule to exist. 168 00:09:48,714 --> 00:09:52,380 ‫Well, the big reason is that a linked list, 169 00:09:52,380 --> 00:09:55,170 ‫which relies on the hook call order, 170 00:09:55,170 --> 00:10:00,060 ‫is the simplest way to associate each hook with its value. 171 00:10:00,060 --> 00:10:03,600 ‫So basically, the order in which the hook is called 172 00:10:03,600 --> 00:10:06,390 ‫uniquely identifies the hook. 173 00:10:06,390 --> 00:10:09,660 ‫For example, React knows that hook number one 174 00:10:09,660 --> 00:10:13,230 ‫has a state of 23, and that hook number two 175 00:10:13,230 --> 00:10:15,900 ‫has a state of empty string. 176 00:10:15,900 --> 00:10:19,470 ‫So the value is associated with the call order. 177 00:10:19,470 --> 00:10:23,220 ‫And this is very convenient because by using the call order, 178 00:10:23,220 --> 00:10:26,580 ‫we developers don't have to manually assign names 179 00:10:26,580 --> 00:10:30,000 ‫to each hook, which would create multiple problems 180 00:10:30,000 --> 00:10:33,420 ‫that we don't need to get into at this point. 181 00:10:33,420 --> 00:10:36,270 ‫Alright, so I hope that you didn't mind 182 00:10:36,270 --> 00:10:40,355 ‫yet another deep dive into some of React's internals. 183 00:10:40,355 --> 00:10:44,910 ‫I personally find these really interesting and fascinating, 184 00:10:44,910 --> 00:10:47,190 ‫which is why I keep getting excited 185 00:10:47,190 --> 00:10:49,650 ‫to share this stuff with you. 186 00:10:49,650 --> 00:10:53,283 ‫But now it's time to get back into writing some code.