1 00:00:00,210 --> 00:00:04,980 Nice honor once we have covered all the issues, the fact works. 2 00:00:05,520 --> 00:00:11,950 Now let's put it to good use and let's see how we can fetch data using a use effect. 3 00:00:12,270 --> 00:00:18,890 And first, what I would want you to do is in the app Jass, change the import a little bit. 4 00:00:19,140 --> 00:00:25,140 Now, I don't think I'll change the name, but we're going to go with usufruct again and we're looking 5 00:00:25,140 --> 00:00:26,310 for the final in this case. 6 00:00:26,670 --> 00:00:35,760 And let's look for use of fact, which data file and once it renders, you'll notice a bunch of GitHub 7 00:00:35,760 --> 00:00:36,130 users. 8 00:00:36,510 --> 00:00:43,560 So essentially, this is what we're trying to create, where there's going to be some title and we'll 9 00:00:43,560 --> 00:00:46,680 just get some default GitHub users. 10 00:00:46,690 --> 00:00:49,300 And of course, we'll do that using use. 11 00:00:50,520 --> 00:00:53,840 So now let's change it around to a set up. 12 00:00:54,150 --> 00:01:01,980 So instead of the final folder, we're looking for the setup and we should see on screen data, that's 13 00:01:01,980 --> 00:01:03,970 the one that we're looking for. 14 00:01:04,350 --> 00:01:06,390 I think I can close the console. 15 00:01:06,840 --> 00:01:08,040 It's not going to be necessary. 16 00:01:08,280 --> 00:01:13,650 And let's navigate to fresh data I already provided of the URL. 17 00:01:13,650 --> 00:01:19,590 If you want to double check what you're going to get back, you can just copy that and navigate your 18 00:01:19,590 --> 00:01:20,130 browser. 19 00:01:20,460 --> 00:01:23,310 Copy and paste browser will perform a good request. 20 00:01:23,670 --> 00:01:29,670 And as you can see, essentially you will get a array of objects online in each and every object. 21 00:01:29,680 --> 00:01:34,980 We have info about the get up users and I believe we're getting 30. 22 00:01:35,340 --> 00:01:36,930 But don't quote me on that. 23 00:01:37,080 --> 00:01:39,240 I might be wrong, but I believe there's three. 24 00:01:39,900 --> 00:01:48,810 So once we have this particular set up now, of course, let's work on our component where I think I 25 00:01:48,810 --> 00:01:53,170 would want to start by setting up some kind of state value. 26 00:01:53,340 --> 00:01:54,690 Again, we have to use that. 27 00:01:55,020 --> 00:01:56,740 So let's set up the users. 28 00:01:56,760 --> 00:02:00,750 I'm going to go with const and users now. 29 00:02:00,760 --> 00:02:07,770 I will need a set user's function as well so that users here and that is going to be equal to use state. 30 00:02:07,980 --> 00:02:09,870 And then let's start with an empty array. 31 00:02:10,230 --> 00:02:18,420 That is going to be my default setup then, of course, and the return that's also add some kind of 32 00:02:18,420 --> 00:02:27,090 hitting three think this is where all our users eventually or below it, we're going to go here with 33 00:02:27,090 --> 00:02:28,860 GitHub users. 34 00:02:30,030 --> 00:02:37,710 All right, that's a good start, and then now let's set up our usufruct, so I'll set up my hook. 35 00:02:38,220 --> 00:02:42,510 So use AFACT and then I'll have my callback function. 36 00:02:42,510 --> 00:02:49,260 Of course, within the callback function, what I would want is to perform a feature request. 37 00:02:49,690 --> 00:02:52,710 Now we have multiple scenarios. 38 00:02:52,830 --> 00:02:57,840 We can set up the function here so you can just start typing away. 39 00:02:58,080 --> 00:03:01,770 That is always an option or you can set up a separate function. 40 00:03:02,130 --> 00:03:07,710 So in my case, I'm going to go with separate function for a very simple reason that I'm going to use 41 00:03:07,710 --> 00:03:08,820 a single word. 42 00:03:09,150 --> 00:03:16,500 And that is one more rule that I would want to mention that you cannot you cannot make this function 43 00:03:16,500 --> 00:03:22,110 async wait for a simple reason that remember async await returns. 44 00:03:22,110 --> 00:03:23,550 What it returns a promise. 45 00:03:23,550 --> 00:03:23,950 Correct. 46 00:03:24,300 --> 00:03:29,570 So if I say here, a sink right here, it is going to be an issue. 47 00:03:30,090 --> 00:03:31,170 OK, this will work. 48 00:03:31,500 --> 00:03:37,230 There's going to be a big fat error because you usufruct cannot be async, it cannot return promise. 49 00:03:37,410 --> 00:03:40,560 Because remember in the previous video we talked about that clean up function. 50 00:03:40,800 --> 00:03:44,090 So usufruct is looking for that, not for the promise. 51 00:03:44,400 --> 00:03:51,570 That's why you can either set up async, avoid inside the callback function, or you can just set it 52 00:03:51,570 --> 00:03:54,600 up as a separate function, which is exactly what I'm going to do. 53 00:03:54,870 --> 00:03:58,100 So I'm going to go here with Karns and then I'll call this get users. 54 00:03:58,350 --> 00:04:05,790 Now, like I said, it is going to be a simple function because I use the async, await syntax and then 55 00:04:05,820 --> 00:04:09,150 within the function body, I'm just going to be looking for a response. 56 00:04:09,150 --> 00:04:15,510 So I'll go with the response is equal to a wait and then I'll use the built in Futch. 57 00:04:15,750 --> 00:04:20,220 But of course you can use Axios or some kind of external library as well. 58 00:04:20,470 --> 00:04:24,960 By the way, I think during the project will use the external libraries because it's just going to be 59 00:04:24,960 --> 00:04:25,980 a little bit easier. 60 00:04:26,250 --> 00:04:29,970 And then we already know that within the fact we just need to pass in the string. 61 00:04:30,970 --> 00:04:37,090 Meaning DRL, which, of course, he is right now, the API, GitHub dot com and then for its users 62 00:04:37,330 --> 00:04:42,100 now we already know that as far as Futch we would need to run the JSON because we're looking for that 63 00:04:42,400 --> 00:04:42,970 format. 64 00:04:43,150 --> 00:04:44,820 And again, we can await for that. 65 00:04:45,100 --> 00:04:52,630 And in this case, I'll go for users and is equal to a wait and response. 66 00:04:53,050 --> 00:04:56,230 So that is of course my variable and then I run the JSON. 67 00:04:56,740 --> 00:05:00,960 So my key thing here is getting the users. 68 00:05:01,270 --> 00:05:08,800 And before you're on set users, let's just do a little bit of that's where I'm going to show you what 69 00:05:08,800 --> 00:05:13,130 would be an issue if you just directly call said users. 70 00:05:13,360 --> 00:05:18,220 So first, let's start by considering whether we are getting the data in a console. 71 00:05:18,400 --> 00:05:23,390 And then once we get the data, then, of course, we'll discuss what steps do we need to take. 72 00:05:23,830 --> 00:05:26,350 So in the console at the moment, I don't see anything. 73 00:05:26,710 --> 00:05:30,300 Of course, the reason why I don't see anything, because in the user I didn't call it. 74 00:05:30,610 --> 00:05:32,410 So let me get users. 75 00:05:32,420 --> 00:05:33,400 Let's invoke it. 76 00:05:33,700 --> 00:05:35,220 And now our console. 77 00:05:35,230 --> 00:05:37,590 Yeah, I have three users. 78 00:05:37,810 --> 00:05:38,980 Life is beautiful. 79 00:05:38,980 --> 00:05:40,780 Like I said, it is an array. 80 00:05:40,780 --> 00:05:44,980 And then each and every user in that array is an object. 81 00:05:45,340 --> 00:05:49,460 Now what are the steps that I would want to take? 82 00:05:49,870 --> 00:05:52,720 Well, I would want to use set users. 83 00:05:53,020 --> 00:05:59,290 And of course, instead of this empty array, I would want to set it up as the users that I'm getting 84 00:05:59,290 --> 00:06:00,010 from the getup. 85 00:06:00,460 --> 00:06:00,910 Correct. 86 00:06:01,210 --> 00:06:02,290 So instead of the same thing. 87 00:06:02,290 --> 00:06:02,550 Right. 88 00:06:02,560 --> 00:06:05,050 It's going to be all right of thirty users. 89 00:06:05,320 --> 00:06:13,270 And then once I set it up, then in the six I will iterate over my users and then for each and every 90 00:06:13,270 --> 00:06:19,780 user I'll just set up some type of return, meaning there's going to be a name, there's going to be 91 00:06:19,780 --> 00:06:21,940 an image and all that good stuff. 92 00:06:22,390 --> 00:06:26,380 Now before we do anything, I would want you to think about something. 93 00:06:26,830 --> 00:06:31,750 So I'll purposely placed this in the comments because I don't want you to run this right now. 94 00:06:32,200 --> 00:06:37,540 But what do you think is going to happen if we go with such users and then we pass in the users? 95 00:06:37,690 --> 00:06:42,250 And let me tell you right away that as far as the code, this is correct. 96 00:06:42,250 --> 00:06:43,270 There's nothing wrong here. 97 00:06:43,660 --> 00:06:50,710 So I have my GitHub users and then I'm just using my set function and then passing in the GitHub users. 98 00:06:51,220 --> 00:06:52,470 But there's a different problem. 99 00:06:52,990 --> 00:06:54,460 What do you think is going to be a problem? 100 00:06:55,180 --> 00:06:55,570 Well. 101 00:06:56,440 --> 00:06:57,970 I have my use of fact, correct? 102 00:06:58,120 --> 00:07:00,380 It runs after every render. 103 00:07:00,910 --> 00:07:05,520 Now, again, I've said this already three thousand times, but it's very important. 104 00:07:05,950 --> 00:07:07,510 What is the U.S. state doing? 105 00:07:08,810 --> 00:07:09,950 It preserves the value. 106 00:07:10,850 --> 00:07:14,930 And it triggers Rylander, so what do you think is going to happen right now? 107 00:07:15,380 --> 00:07:17,030 Everything was fine with console log. 108 00:07:17,360 --> 00:07:18,950 We did not trigger Virender. 109 00:07:19,490 --> 00:07:20,210 That was fine. 110 00:07:20,750 --> 00:07:23,300 But with this one, what are we doing over here? 111 00:07:23,900 --> 00:07:25,250 So we're getting the users. 112 00:07:25,710 --> 00:07:27,920 Then I call set users. 113 00:07:28,010 --> 00:07:29,750 I update this. 114 00:07:30,470 --> 00:07:31,840 I update users. 115 00:07:32,300 --> 00:07:34,400 Now, what is that doing in return? 116 00:07:34,790 --> 00:07:36,640 That triggers a reminder. 117 00:07:37,010 --> 00:07:38,650 Now, what are we doing in the rear end? 118 00:07:39,350 --> 00:07:43,040 We're getting users and then again, we're setting users. 119 00:07:43,400 --> 00:07:46,610 So essentially we're setting up a infinite loop. 120 00:07:47,120 --> 00:07:50,360 So if you're on this, essentially your browser will crash. 121 00:07:50,630 --> 00:07:56,600 Now, it's not the end of the world, but that's why I commented out, because I don't want my browser 122 00:07:56,600 --> 00:07:57,140 to crash. 123 00:07:57,380 --> 00:07:59,420 I want to start out, be my guest again. 124 00:07:59,420 --> 00:08:06,560 It's not the end of the world, but essentially you will have the infinite loop because in your function 125 00:08:06,560 --> 00:08:15,850 that you call in the user, you are triggering render because you call shut users and wants you triggering 126 00:08:15,860 --> 00:08:19,910 render again, you call user and on and on and on and on. 127 00:08:20,180 --> 00:08:21,280 So what is the solution. 128 00:08:21,440 --> 00:08:23,130 Simple out here. 129 00:08:23,130 --> 00:08:28,760 Dependancy recorrect, something we already talked about and in this case I only want to run once the 130 00:08:28,760 --> 00:08:34,520 component Randers so I'll add empty dependency w correct. 131 00:08:34,850 --> 00:08:42,050 So now everything should be fine where I think I can just comment on the log or your reference and then 132 00:08:42,080 --> 00:08:48,470 I can call site users and if I don't have the infinite loop then life is great. 133 00:08:48,740 --> 00:08:52,810 So now of course what I would want is iterate over those users. 134 00:08:53,190 --> 00:08:57,710 So again we'll set up curly braces, will say users then a map. 135 00:08:57,720 --> 00:09:01,310 So we're mapping over for each and every user. 136 00:09:01,910 --> 00:09:03,920 Of course I'll have my parameter. 137 00:09:03,930 --> 00:09:05,720 So call this user. 138 00:09:06,080 --> 00:09:08,500 And as far as the return, I don't know. 139 00:09:08,520 --> 00:09:10,280 I'm going to go with a list item. 140 00:09:10,670 --> 00:09:11,690 And you know what? 141 00:09:11,870 --> 00:09:15,220 I think I'll place this in the short list. 142 00:09:15,560 --> 00:09:18,860 So let me fix this a little bit where I'll be on our list. 143 00:09:19,160 --> 00:09:20,890 Let's add a class name, by the way. 144 00:09:20,900 --> 00:09:23,290 This class is coming from the index address. 145 00:09:23,570 --> 00:09:25,370 This just adds a little bit of styling. 146 00:09:25,640 --> 00:09:30,230 And then let's wrap our users in that on our list. 147 00:09:30,380 --> 00:09:35,510 And then for each and every user, of course, like I said, I'm returning a list item now. 148 00:09:35,510 --> 00:09:41,390 User is an object and I'll write a way, set up my structuring where I'm looking for idealogue login 149 00:09:41,720 --> 00:09:44,210 and then Avatar and then Yahel. 150 00:09:44,450 --> 00:09:48,520 Now, if you want to console log, you want to see what is the user, be my guest. 151 00:09:48,860 --> 00:09:53,360 But in order to speed up everything, I'm going to do that in here. 152 00:09:53,360 --> 00:09:55,070 I'm going to search the email URL. 153 00:09:55,100 --> 00:10:00,710 These are just the properties that are on the object and that is coming from my user. 154 00:10:01,040 --> 00:10:06,470 And as far as the list item, remember, each and every time we have a list, we needed to pass this 155 00:10:06,830 --> 00:10:08,030 unique key. 156 00:10:08,210 --> 00:10:09,980 And of course, this is what I'm doing over here. 157 00:10:10,250 --> 00:10:18,920 And then for the user to want to have the image as far as the source, it is equal to the Avatar and 158 00:10:18,920 --> 00:10:21,880 then underscore you are all online. 159 00:10:21,890 --> 00:10:23,290 As far as the alternative, you know what? 160 00:10:23,450 --> 00:10:30,400 Let's pass in the login just so we have some reasonable value and then let's go with a dev. 161 00:10:30,410 --> 00:10:36,230 So right next to our image, we're going to have a dev with a hearing for and then let's play here to 162 00:10:36,230 --> 00:10:36,710 login. 163 00:10:37,140 --> 00:10:38,570 That is going to be my name. 164 00:10:39,000 --> 00:10:42,050 As I say, it should look something like this. 165 00:10:42,350 --> 00:10:48,910 And then right below it, let's add a link that just links back to a user profile. 166 00:10:49,310 --> 00:10:52,210 So here we will go with a demo you URL. 167 00:10:52,550 --> 00:10:57,680 I'm just type profile like so and we're in good shape. 168 00:10:58,070 --> 00:11:04,890 We're essentially within a matter of minutes we set up a data approaching where we're looking for GitHub 169 00:11:05,030 --> 00:11:05,540 users. 170 00:11:05,780 --> 00:11:13,340 Again, the biggest takeaway would be the fact that if you have some kind of functionality within the 171 00:11:13,340 --> 00:11:18,710 function, whether that is directly in a callback function or within one of the functions that you're 172 00:11:18,710 --> 00:11:28,760 calling within the callback function of the user, if you are triggering re render, make sure that 173 00:11:29,570 --> 00:11:30,650 the dependency. 174 00:11:30,660 --> 00:11:31,030 All right. 175 00:11:31,460 --> 00:11:38,390 So that we're either you only run it once they come on Randers or if certain values change. 176 00:11:38,630 --> 00:11:45,500 But be very, very careful of how you set this up, because essentially, if you will fail to do that, 177 00:11:45,740 --> 00:11:48,440 then you'll get the infinite loop again. 178 00:11:48,740 --> 00:11:55,430 I keep on repeating it's not the end of the world, but it might just get annoying to keep on restarting 179 00:11:55,580 --> 00:12:02,900 your browser just because you're not checking when you are triggering the ORENDER and of course when 180 00:12:02,900 --> 00:12:04,490 the user effect Arun's.