1 00:00:01,200 --> 00:00:02,760 ‫Welcome back. 2 00:00:02,760 --> 00:00:07,530 ‫So, the last part of this section is all about custom hooks. 3 00:00:07,530 --> 00:00:11,250 ‫And so let's start by understanding what custom hooks are 4 00:00:11,250 --> 00:00:13,311 ‫and when to create one. 5 00:00:13,311 --> 00:00:17,433 ‫Now, custom hooks are all about reusability. 6 00:00:18,450 --> 00:00:21,930 ‫And in React, we have basically two types 7 00:00:21,930 --> 00:00:24,690 ‫of things that we can reuse. 8 00:00:24,690 --> 00:00:28,920 ‫A piece of UI or a piece of logic. 9 00:00:28,920 --> 00:00:29,790 ‫That's it. 10 00:00:29,790 --> 00:00:32,850 ‫That's all the things that we can reuse. 11 00:00:32,850 --> 00:00:35,970 ‫Now, if we want to reuse a piece of UI, 12 00:00:35,970 --> 00:00:39,690 ‫we already know that we use a component. 13 00:00:39,690 --> 00:00:43,710 ‫On the other hand, if you want to reuse logic in React, 14 00:00:43,710 --> 00:00:46,140 ‫you first need to ask the question, 15 00:00:46,140 --> 00:00:50,550 ‫does the logic that I want to reuse have any hooks? 16 00:00:50,550 --> 00:00:53,700 ‫If not, all you need is a regular function, 17 00:00:53,700 --> 00:00:58,530 ‫which can live either inside or outside of your component. 18 00:00:58,530 --> 00:01:02,520 ‫However, if the logic does contain any React hook, 19 00:01:02,520 --> 00:01:06,900 ‫you cannot just extract the logic into a regular function. 20 00:01:06,900 --> 00:01:10,983 ‫Instead, what you need to create is a custom hook. 21 00:01:11,910 --> 00:01:16,860 ‫So basically, custom hooks allow us to reuse stateful logic 22 00:01:16,860 --> 00:01:19,470 ‫among multiple components 23 00:01:19,470 --> 00:01:22,830 ‫and actually not only stateful logic 24 00:01:22,830 --> 00:01:27,830 ‫but really any logic that contains one or more React hooks. 25 00:01:28,170 --> 00:01:29,400 ‫So we can say 26 00:01:29,400 --> 00:01:33,331 ‫that custom hooks allow us to reuse non-visual logic, 27 00:01:33,331 --> 00:01:36,630 ‫which is a more generic term. 28 00:01:36,630 --> 00:01:41,331 ‫Now, just like regular functions or components or effect, 29 00:01:41,331 --> 00:01:44,910 ‫one hook should only have one purpose. 30 00:01:44,910 --> 00:01:49,800 ‫So it should only do one specific, well-defined thing. 31 00:01:49,800 --> 00:01:53,850 ‫So the idea is not to simply put all the hooks 32 00:01:53,850 --> 00:01:57,916 ‫of a component into a custom hook and call it a day. 33 00:01:57,916 --> 00:01:58,980 ‫No. 34 00:01:58,980 --> 00:02:03,750 ‫The idea is to make custom hooks reusable and portable 35 00:02:03,750 --> 00:02:05,368 ‫so that you can even use them 36 00:02:05,368 --> 00:02:08,280 ‫in completely different projects. 37 00:02:08,280 --> 00:02:11,130 ‫And actually, now that we have had hooks 38 00:02:11,130 --> 00:02:15,210 ‫for so many years in React, developers have started 39 00:02:15,210 --> 00:02:18,660 ‫to share their custom hooks with the world. 40 00:02:18,660 --> 00:02:21,758 ‫And so, there are now lots of custom hook libraries 41 00:02:21,758 --> 00:02:26,420 ‫that you can download from NPM and use in your projects. 42 00:02:26,420 --> 00:02:31,420 ‫Now, since custom hooks are made out of regular React hooks, 43 00:02:31,680 --> 00:02:35,580 ‫the rules of hooks that we learned about before still apply 44 00:02:35,580 --> 00:02:37,410 ‫to them as well. 45 00:02:37,410 --> 00:02:41,700 ‫Okay, but now, let's look at an actual custom hook 46 00:02:41,700 --> 00:02:45,510 ‫so that we can learn just a bit more about them. 47 00:02:45,510 --> 00:02:48,960 ‫So first, a custom hook is really just 48 00:02:48,960 --> 00:02:53,490 ‫a JavaScript function, so it can receive and return any data 49 00:02:53,490 --> 00:02:56,850 ‫that is relevant to this custom hook. 50 00:02:56,850 --> 00:02:59,100 ‫In fact, it's very common to return 51 00:02:59,100 --> 00:03:03,000 ‫an object or an array from a custom hook. 52 00:03:03,000 --> 00:03:06,540 ‫And notice how this is different from components, 53 00:03:06,540 --> 00:03:09,990 ‫which are also just regular JavaScript functions 54 00:03:09,990 --> 00:03:12,188 ‫but which can only receive props 55 00:03:12,188 --> 00:03:16,053 ‫and always have to return some JSX. 56 00:03:17,070 --> 00:03:19,187 ‫Now, the difference between regular functions 57 00:03:19,187 --> 00:03:22,290 ‫and custom hooks is that custom hooks 58 00:03:22,290 --> 00:03:25,740 ‫need to use one or more React hooks. 59 00:03:25,740 --> 00:03:28,440 ‫So this custom hook here, for example 60 00:03:28,440 --> 00:03:32,830 ‫uses two-use state and one-use effect hook to abstract 61 00:03:32,830 --> 00:03:37,800 ‫a simple fetch functionality into this custom hook. 62 00:03:37,800 --> 00:03:39,623 ‫And finally, in order for us 63 00:03:39,623 --> 00:03:44,580 ‫and React to recognize dysfunction as an actual hook, 64 00:03:44,580 --> 00:03:48,330 ‫the function name needs to start with the word use. 65 00:03:48,330 --> 00:03:51,600 ‫So, just like all the built-in React hooks. 66 00:03:51,600 --> 00:03:55,110 ‫So in this example, that's use fetch. 67 00:03:55,110 --> 00:03:58,080 ‫And this is really not optional. 68 00:03:58,080 --> 00:04:02,430 ‫So you need to give the function a name, starting with use. 69 00:04:02,430 --> 00:04:04,977 ‫Otherwise, it's gonna be just a regular function 70 00:04:04,977 --> 00:04:08,820 ‫in the eyes of React. ‫Now, right. 71 00:04:08,820 --> 00:04:10,380 ‫And that's all the theory 72 00:04:10,380 --> 00:04:13,050 ‫that you need to know about custom hooks. 73 00:04:13,050 --> 00:04:16,290 ‫And so, let's now go build ourselves some custom hooks 74 00:04:16,290 --> 00:04:18,393 ‫for the rest of this section.