1 00:00:00,360 --> 00:00:07,800 Assuming that you successfully grab the You are all for my custom API and you copy and paste it within 2 00:00:07,800 --> 00:00:08,810 the URL. 3 00:00:08,930 --> 00:00:11,940 Jess and you export it as a default. 4 00:00:11,940 --> 00:00:18,480 Now it can proceed on our data fetching functionality and I would want to start very simply by jogging 5 00:00:18,480 --> 00:00:21,940 our memory previously prior to react. 6 00:00:22,440 --> 00:00:24,760 How did we perform data fetching. 7 00:00:24,780 --> 00:00:27,390 Well we needed to have a class based component correct. 8 00:00:27,600 --> 00:00:29,460 And then we needed to use component. 9 00:00:29,460 --> 00:00:31,950 Did mount lifecycle method. 10 00:00:32,310 --> 00:00:34,770 However we have a functional component. 11 00:00:34,770 --> 00:00:38,120 So how are we going to do that because we cannot use component demand. 12 00:00:38,520 --> 00:00:45,240 And the answer is using use affect and use effect hook runs by default. 13 00:00:45,240 --> 00:00:51,880 After every render and it allows us to perform side effects like let's say in our case data fetching 14 00:00:51,900 --> 00:01:00,240 that we can also set something up like listening for a window event as a first parameter it gets a callback 15 00:01:00,240 --> 00:01:04,130 function so that callback function is going to run by default. 16 00:01:04,260 --> 00:01:10,860 After every render but this callback function also needs to return a cleanup function. 17 00:01:10,860 --> 00:01:16,890 Now what I say needs to you don't have to always set it up but you cannot set this combat function as 18 00:01:16,920 --> 00:01:22,110 a synchronous function because we know that if we set up let's say this callback function as a synchronous 19 00:01:22,110 --> 00:01:25,560 function asynchronous functions by default return a promise. 20 00:01:25,560 --> 00:01:31,050 So you cannot set this up as a synchronous function because you must keep the option of returning a 21 00:01:31,050 --> 00:01:31,820 function. 22 00:01:31,830 --> 00:01:34,080 Now why you would want to use the cleanup function. 23 00:01:34,080 --> 00:01:38,030 Well let's say you're going to subscribe to some kind of service you're going to subscribe to I don't 24 00:01:38,040 --> 00:01:40,700 know whether they use their has logged in or not. 25 00:01:40,710 --> 00:01:47,940 Well if you are on a product page everything is fine once you navigate away then we're just on mounting 26 00:01:47,940 --> 00:01:53,430 the component but description is still gonna say so that's the reason why I would want to use a cleanup 27 00:01:53,430 --> 00:02:00,960 function where each and every time we can mount a component or component amount then we also let's say 28 00:02:00,960 --> 00:02:03,260 cancel our subscription that way. 29 00:02:03,260 --> 00:02:07,890 Essentially we're just avoiding memory leaks and the second argument in our case which is going to be 30 00:02:07,890 --> 00:02:15,200 very very important is gonna be array of values or dependencies because even though by default use effect 31 00:02:15,270 --> 00:02:19,340 is going to run after every render while there's cases where we don't want. 32 00:02:19,650 --> 00:02:20,880 And that's the reason why. 33 00:02:20,910 --> 00:02:26,730 Second argument is gonna be very very important and then we're going to import the library we're gonna 34 00:02:26,760 --> 00:02:33,120 use for our HDTV requests and like already previously mentioned we could definitely use punch but just 35 00:02:33,120 --> 00:02:39,860 for the sake of simplicity we're going to use x years so we can roll with X years from ACT CEOs library 36 00:02:40,260 --> 00:02:42,450 and then we're going to set up our use effect. 37 00:02:42,510 --> 00:02:48,710 Again you can import it directly from react but I'm just gonna type react that and then use effect. 38 00:02:48,750 --> 00:02:53,000 So let me type react that use fact. 39 00:02:53,300 --> 00:02:58,500 And then of course we need to pass in our callback function so we pass in our callback function. 40 00:02:58,530 --> 00:03:02,580 So this is the function that is going to run by default after every render. 41 00:03:02,580 --> 00:03:09,110 And like I said we optionally can return a cleaning function if we're setting up some kind of description. 42 00:03:09,210 --> 00:03:11,330 So the way we're gonna write that we're going to say return. 43 00:03:11,700 --> 00:03:15,340 And then whatever we would want to run as our callback function. 44 00:03:15,360 --> 00:03:20,650 So this is gonna be the cleanup function where we run the first function by default after every render. 45 00:03:20,760 --> 00:03:26,250 But if we would want to clean it up then we're gonna have another function that we're returning from 46 00:03:26,310 --> 00:03:32,200 our callback function and then within this function we're going to perform our cleanup actions. 47 00:03:32,340 --> 00:03:36,990 And then if we would want to set up our data fetching and of course I'm going to write. 48 00:03:37,020 --> 00:03:37,580 OK. 49 00:03:37,710 --> 00:03:43,490 So within the function within my callback function I would want to set up a ax heroes. 50 00:03:43,510 --> 00:03:49,560 And since who would want to get a get request or perform a get request we're gonna type in get and then 51 00:03:49,560 --> 00:03:51,180 we need to pass in the URL. 52 00:03:51,540 --> 00:04:00,120 So right after the axioms let's also import the URL from and then we're looking for to utilize then 53 00:04:00,120 --> 00:04:05,640 within the tools we're looking for the new RL And then we would need to passing you are all within the 54 00:04:05,640 --> 00:04:06,600 axioms. 55 00:04:06,600 --> 00:04:11,950 So let's say you are well but we need to set it up as in fact a variable. 56 00:04:11,970 --> 00:04:17,970 So the way it's going to work is we're gonna have template strings then we're going to have our you 57 00:04:17,970 --> 00:04:20,000 are all variable first. 58 00:04:20,130 --> 00:04:23,700 So you say you are variable and then we're gonna have a product. 59 00:04:23,850 --> 00:04:26,240 So forward slash product. 60 00:04:26,400 --> 00:04:28,100 This is gonna return a promise. 61 00:04:28,110 --> 00:04:30,970 So that's the reason why we can change that then. 62 00:04:31,080 --> 00:04:36,600 And then since I would just want to console log at first because we haven't talked about properly about 63 00:04:36,630 --> 00:04:42,060 the second argument that we can have then we're just going to say whatever name. 64 00:04:42,060 --> 00:04:49,080 So in my case I'm gonna name this store product so store product and then I would just want to console 65 00:04:49,080 --> 00:04:49,450 log it. 66 00:04:49,830 --> 00:04:57,870 So I'm gonna go with console log and we're gonna console log store products like sell and let's see 67 00:04:58,320 --> 00:05:01,260 if everything is correct within our console. 68 00:05:01,260 --> 00:05:02,850 We should get back our data.