1 00:00:00,120 --> 00:00:00,660 Nicely done. 2 00:00:01,350 --> 00:00:08,680 Next, we have custom hooks and essentially custom hooks allow us to reduce the functionality. 3 00:00:09,240 --> 00:00:10,290 So let me be clear. 4 00:00:10,290 --> 00:00:15,980 We're not talking about reusing HDMI elements where you can do that with components. 5 00:00:16,530 --> 00:00:22,860 We are talking about the functionality, whether that is fetching data, saving to local storage and 6 00:00:22,860 --> 00:00:24,030 that sort of thing. 7 00:00:24,400 --> 00:00:30,330 Also, before we begin, let me just mention that I purposely added only one example of custom hooks, 8 00:00:30,450 --> 00:00:33,690 since you can easily find other custom hooks examples. 9 00:00:33,930 --> 00:00:41,460 So the code that community has created for three years, but just type in custom hooks in your favorite 10 00:00:41,670 --> 00:00:42,650 search engine. 11 00:00:42,960 --> 00:00:49,100 The point of this example is to make sure you understand the purpose and the setup of the custom hooks. 12 00:00:49,380 --> 00:00:56,010 So after that, you can either create your own custom hooks or with ease, use someone else's custom 13 00:00:56,010 --> 00:00:57,880 hooks in your own apps. 14 00:00:58,290 --> 00:01:05,370 With that said, let's start by importing the module and the module we're looking for is module number 15 00:01:05,370 --> 00:01:08,280 nine by the name of custom. 16 00:01:08,820 --> 00:01:13,950 Again, we have final set of folder and of course, in the address we're going to be looking for this 17 00:01:13,950 --> 00:01:14,840 setup folder. 18 00:01:15,180 --> 00:01:23,100 So we go here with import on line the setup and we are looking in the editorial and then more specifically, 19 00:01:23,700 --> 00:01:27,780 folder number nine, custom hooks and of course, of the setup. 20 00:01:28,120 --> 00:01:33,180 Now, in this case, there is a file name and we're looking for, for example. 21 00:01:33,630 --> 00:01:37,440 So on this case, I'll remove the heading to online. 22 00:01:37,440 --> 00:01:40,370 Of course, I would want to showcase the setup. 23 00:01:40,890 --> 00:01:47,110 So once we load, now we have loading DataDot and then we have the data. 24 00:01:47,490 --> 00:01:48,870 So what is happening over here? 25 00:01:49,800 --> 00:01:57,720 Well, if we navigate to file the example, within hours of that, we'll have somewhat standard set 26 00:01:57,720 --> 00:01:59,330 up to fetch data. 27 00:01:59,670 --> 00:02:04,620 So we have your state, we have use usufruct fact, we have lowering that variable. 28 00:02:04,630 --> 00:02:10,890 We have set loading, of course, by default loading stro, then we have some kind of state variable 29 00:02:11,130 --> 00:02:19,260 that is called product initially areas, and then we have the function that fetches something. 30 00:02:19,470 --> 00:02:26,460 So in this case, this is fetching from my own API and we use this in my Joske, of course, where we 31 00:02:26,460 --> 00:02:27,180 have the product. 32 00:02:27,540 --> 00:02:31,680 Now if you want, you can of course, navigate a bigger screen. 33 00:02:33,040 --> 00:02:37,000 And then copy and paste, it is an array of products. 34 00:02:37,970 --> 00:02:43,940 And don't worry, we'll use it a little bit later in tutorial, so you'll see what this is all about, 35 00:02:43,940 --> 00:02:51,400 but essentially it's just a bunch of product with some price, with some name and image and all that. 36 00:02:51,770 --> 00:02:53,240 So we're pitching that. 37 00:02:53,570 --> 00:02:54,700 I hit the URL. 38 00:02:55,010 --> 00:02:56,210 Of course, I get the response. 39 00:02:56,210 --> 00:03:04,850 I run the JSON and then I set two state values and I have some products and then I have set loading 40 00:03:04,990 --> 00:03:05,480 defaults. 41 00:03:05,750 --> 00:03:13,960 And of course I'm running this with my usufruct and I have the empty array means that it runs by default 42 00:03:13,970 --> 00:03:16,330 the moment we run the app, and that's it. 43 00:03:16,610 --> 00:03:19,040 And then of course, I'm just so long along the product. 44 00:03:19,370 --> 00:03:20,540 Not the point of this. 45 00:03:21,480 --> 00:03:24,480 Is not to tell you that there's something wrong with the setup. 46 00:03:24,810 --> 00:03:31,500 The point is to showcase what if I would want to reuse this functionality because there's no way for 47 00:03:31,500 --> 00:03:33,230 me to reuse it. 48 00:03:33,540 --> 00:03:40,350 I mean, I can use this with this particular URL, but if I have a different Cambourne, that also needs 49 00:03:40,350 --> 00:03:41,100 to fetch something. 50 00:03:41,460 --> 00:03:48,150 Again, I'm just reinventing the wheel now before we do anything in our custom HOLC. 51 00:03:49,030 --> 00:03:54,450 Let me just showcase that if you can, so long, of course, you'll be able to see the products again. 52 00:03:54,520 --> 00:03:58,240 The point is not to set up anything as far as the component. 53 00:03:58,270 --> 00:03:59,500 We simply have the loading. 54 00:04:00,010 --> 00:04:04,180 So we check whether the state's value for the loading is true. 55 00:04:04,360 --> 00:04:07,140 If it is, then we showcase loading that at that. 56 00:04:07,150 --> 00:04:10,340 And then once we're done with loading, we just displayed it there. 57 00:04:10,780 --> 00:04:14,810 And what you should see in a console are these 12 products. 58 00:04:15,190 --> 00:04:17,620 So, again, this is not our main concern. 59 00:04:17,990 --> 00:04:22,650 If we have the products, that just means that our fetch was successful. 60 00:04:23,050 --> 00:04:28,340 Our point is somehow to come up with functionality that we can reuse. 61 00:04:28,840 --> 00:04:31,480 So if I don't have another component. 62 00:04:32,380 --> 00:04:34,970 That also would want to fetch data. 63 00:04:35,410 --> 00:04:42,220 I don't need to duplicate these lines of code, by the way, in this case, we don't have the error. 64 00:04:42,400 --> 00:04:44,920 Keep in mind, normally you would have the error as well. 65 00:04:45,190 --> 00:04:51,940 And of course, once we set up our custom hook, we can definitely add error as well. 66 00:04:52,120 --> 00:04:55,870 And I already said that will be creating a new custom hook. 67 00:04:56,110 --> 00:05:03,610 So you can probably already guess that in the second file that is in the folder called Use Fetch, this 68 00:05:03,610 --> 00:05:05,750 is exactly what we're going to do. 69 00:05:06,160 --> 00:05:09,640 So if I navigate there, I can see that I have the react. 70 00:05:09,790 --> 00:05:13,230 I have used state and I have usufruct. 71 00:05:13,360 --> 00:05:16,410 Not only honestly, we actually don't need the react. 72 00:05:16,420 --> 00:05:19,720 We can just use use state and use effect. 73 00:05:20,170 --> 00:05:25,320 And then I have this function, I have this used fetch function. 74 00:05:25,720 --> 00:05:27,220 So here's what we could do. 75 00:05:28,060 --> 00:05:29,170 First, I could save it. 76 00:05:29,620 --> 00:05:37,480 And then where we see, for example, so our previous component, I couldn't just cut out the lines, 77 00:05:37,480 --> 00:05:41,920 starting with loading all the way to where we have the effect. 78 00:05:42,490 --> 00:05:43,870 So let's just grab everything. 79 00:05:43,890 --> 00:05:51,910 So starting with line five all the way to line seventeen and just cut it out and then navigate to use 80 00:05:51,910 --> 00:05:54,240 fetch and copy and paste. 81 00:05:54,700 --> 00:05:56,310 OK, that's an awesome start. 82 00:05:56,560 --> 00:06:04,000 So we still have our loading stage value, we still have the product and of course we still have the 83 00:06:04,000 --> 00:06:04,410 function. 84 00:06:04,750 --> 00:06:10,480 Now if you want, you can rename this something more generic, for example, data. 85 00:06:11,350 --> 00:06:17,920 But since we will use them later, so we will use this custom of later, but will still be fetching 86 00:06:17,920 --> 00:06:19,740 products, I won't do that. 87 00:06:20,050 --> 00:06:24,890 Just keep in mind that you are not limited to calling this product. 88 00:06:25,330 --> 00:06:26,190 It's statewide. 89 00:06:26,350 --> 00:06:28,190 So you can call it whatever you want. 90 00:06:28,630 --> 00:06:33,610 So my whole idea is that I would still want to perform this functionality. 91 00:06:33,910 --> 00:06:34,390 Correct. 92 00:06:34,810 --> 00:06:37,870 But I'm not doing this anymore in the component. 93 00:06:38,200 --> 00:06:40,910 So I have my custom hook. 94 00:06:41,410 --> 00:06:48,630 And of course, in order for this to work, I would need to return something from this customer. 95 00:06:48,940 --> 00:06:52,090 And what I would want to return is an object. 96 00:06:52,510 --> 00:06:57,910 And then in the object, I am going to place my two state powers. 97 00:06:58,300 --> 00:07:03,670 One is going to be loading and then the second one is going to be product. 98 00:07:03,760 --> 00:07:11,140 Since I also would want to make this reusable, I will set it up where I'll pass in the euro into the 99 00:07:11,140 --> 00:07:11,640 function. 100 00:07:11,980 --> 00:07:20,320 So I way when I call this use fetch later in different components, in different topics, I can simply 101 00:07:20,320 --> 00:07:27,220 pass in the New York URL and I'll still get back my loading, meaning whether that is true or false 102 00:07:27,490 --> 00:07:30,430 and also the data that I'm getting back. 103 00:07:30,700 --> 00:07:35,770 So I'm going to say here that I'll be looking for one argument, the oral argument. 104 00:07:36,010 --> 00:07:42,340 And then also I would want to call this usufruct when the URL changes. 105 00:07:42,760 --> 00:07:50,380 So it's going to run one time when essentially we invoke the function and also if we change the argument 106 00:07:50,650 --> 00:07:53,590 for the use for custom. 107 00:07:53,660 --> 00:07:56,560 OK, so I'll save this beautiful. 108 00:07:56,830 --> 00:08:02,260 And now, of course, I need to navigate back to, for example, and I need to import. 109 00:08:02,410 --> 00:08:06,450 And as you can see in line number two, this is exactly what we're doing. 110 00:08:06,820 --> 00:08:10,860 So we import the use for each customer. 111 00:08:11,920 --> 00:08:19,060 And of course, it's coming from the file, the use, which, by the way, I just notice that my name 112 00:08:19,240 --> 00:08:22,560 is somewhat off, should be use French. 113 00:08:22,900 --> 00:08:26,800 So, of course, in your example, it's already going to have a proper name. 114 00:08:26,800 --> 00:08:34,810 But in my case, I would need to change this where this is used for and also my import should be used. 115 00:08:35,860 --> 00:08:41,060 Now, once we're done, of course, now I want to invoke my custom hook. 116 00:08:41,500 --> 00:08:46,890 And this is the case where notice we are returning a object over here. 117 00:08:47,560 --> 00:08:51,160 So normally when we use state since we're returning. 118 00:08:51,160 --> 00:08:51,550 All right. 119 00:08:51,550 --> 00:08:54,030 We did a oray destruction. 120 00:08:54,340 --> 00:09:00,700 So this is going to be the case where now, of course, I would want to structure the object because 121 00:09:00,700 --> 00:09:04,230 that is what I'm getting back from my custom clock. 122 00:09:04,630 --> 00:09:07,690 So here I'm going to seconds and then loading. 123 00:09:08,560 --> 00:09:10,390 So that is the first thing that I'm looking for. 124 00:09:10,660 --> 00:09:13,120 And the second one is the product. 125 00:09:13,480 --> 00:09:13,900 Correct. 126 00:09:14,320 --> 00:09:18,220 And then I'm going to set this equal to use Frege. 127 00:09:18,490 --> 00:09:25,660 So not use the fact not use state, but my own custom hook by the name of use and Lanfranchi. 128 00:09:25,870 --> 00:09:28,210 And of course I need to pass in that YORO. 129 00:09:28,630 --> 00:09:33,850 And of course we already have the URL in the component. 130 00:09:33,850 --> 00:09:41,590 Correct, because we have the variable by the name of euro and that points back to my own API. 131 00:09:41,860 --> 00:09:48,550 And now the cool thing that you'll notice that once we run, our functionality didn't break. 132 00:09:48,700 --> 00:09:54,640 So now we can still check the loading and we can still get the product for a navigator. 133 00:09:54,790 --> 00:09:56,670 Check it out once I refresh. 134 00:09:57,010 --> 00:10:00,750 I definitely can see that I'm still fetching my product. 135 00:10:00,760 --> 00:10:06,050 However, now my functionality is tucked away in a separate place. 136 00:10:06,340 --> 00:10:10,560 Now my functionality is tucked away in a custom hook. 137 00:10:11,170 --> 00:10:18,790 So if I would want to use it and which is exactly what we'll do in the later topics, just so I can 138 00:10:18,790 --> 00:10:25,720 emphasize the point of using the custom hook every time I would want to fetch data instead of using 139 00:10:25,720 --> 00:10:32,620 use state and setting up the loading, setting up some kind of array and that type of thing, I will 140 00:10:32,620 --> 00:10:41,350 just call use fetch Pastorale and from the function I'll get back to things the loading as well as the 141 00:10:41,350 --> 00:10:41,760 product. 142 00:10:41,920 --> 00:10:45,310 So like I said, if you would want to introduce error as well. 143 00:10:46,220 --> 00:10:51,100 Definitely be my guest, but in my case, we're just going to stick with loading and product. 144 00:10:51,530 --> 00:10:56,930 Now, the one thing that I would want to mention that sense of this is a custom hook. 145 00:10:57,230 --> 00:10:59,320 It has to have this use. 146 00:10:59,750 --> 00:11:08,600 So, for example, if you'll just say fetch, so you're exporting Futch, you'll see a big fat error, 147 00:11:09,020 --> 00:11:18,870 even if I change the correct import because we're not allowed to use hooks inside the regular function. 148 00:11:19,160 --> 00:11:24,800 So either the function needs to be a component or it needs to be a custom hook. 149 00:11:25,160 --> 00:11:27,000 That is something you need to keep in mind. 150 00:11:27,290 --> 00:11:33,770 So that's why we need to make sure that when we're creating our own custom hooks, we need to use this 151 00:11:33,770 --> 00:11:34,550 use. 152 00:11:34,940 --> 00:11:38,000 So in this case, I call this use fetch to. 153 00:11:38,000 --> 00:11:41,140 Now, of course, I just need to make sure that my import is correct. 154 00:11:41,660 --> 00:11:44,270 So say here, use fetch. 155 00:11:44,630 --> 00:11:47,440 And of course, everything is going to work.