How to Use ASYNC Functions in React Hooks Tutorial - (UseEffect + Axios)

we actually have all of this stuff in a really convenient object and we're going to pair this together so we're going to go ahead and create a another file uh yeah in source and we're going to call this one axios so lowercase a axios.js okay so now what we'll do is in axios what we're going to do is so every single request that i want to send is going to have the same beginning of like this the same starting url right so what i'm going to do is i've got a little snippet of code here i'm just going to paste it here we're going to explain what this does so the top what we did is we're importing axios and basically that's just using the package manager the package or the module that we've installed earlier which is essentially going to do what postman does right and then next what we're going to do is we're going to create an instance so we have axios gives us this very nice method called create and all you do is you pass it a base url right so this basically means every single time i was to do something like instant so instance dot get then for example this would be sending a get request so if i was to write for example foobar then the url that we're actually going to be sending to is going to be this so it's going to actually look something like this i see does that make sense yeah so basically it's just taking this thing and then it's appending it to that yeah and it's a very simple sort of it's a very good pattern to use whenever you're doing a lot of sort of requests from your app so with that said what we're doing is we're exporting this um and then we pretty much have the bones for sort of starting to make requests right so everything sort of is looking good right now so now we need this so a snippet of code which runs based on specific conditional variable and react luckily gives us a really nice uh hook so it's called usefx we have to employ it and basically what we do is we write use effect and inside of here we basically do the we have two things we have the first argument which is just in a function here and then the second thing is these brackets so these square brackets and basically so i'm going to explain what this does now so and what we can do is in this bracket here if we leave this blank we're basically saying run one so if if we leave the brackets blank then we're saying run once when the row loads and don't run it again right so that's what we say if leave it blank if you were to pass in a variable here so for example if i passed in movies it's going to run once when the row loads and then it's going to run every single time movies changes so we call that a dependency so it's dependent on if movies changes yeah as to whether or not it needs to refile so anytime this variable movie changes this snippet of code is going to run but if you remove that sunny movies from here and it's an empty bracket yeah so basically this code is only going to run once because of this only on page load that's it exactly yep yeah so that should help everyone understand sort of what use effect does um so let's actually start coding in here so what we need to do is i'm going to pull in uh remember we created that little axios helper so i'm going to actually use that here so i'm going to say import i'm going to say axios from but i'm not going to do the typical thing of pulling it from axios to depend the dependency i'm going to go ahead over to our file where we created our little helper because this one remember if we actually um so if i go over to that file right here yeah this one right here so remember we we called it cons instance here but because we export it as a default when we bring it in it doesn't actually matter what name we use which is why over here when i actually import it i can call it whatever i want uh so now what we're going to do here is we're going to use it so i'm basically going to say what i need to do now is i actually need to run a bit of asynchronous work so i need to i need to basically make an asynchronous call because i'm sending a request outside to a third-party service remember guys it's going to take it'll be really quick but it's going to fill it's going to maybe even take a second or half a second but we call that async so in order to run an async function inside of this little use effect because you can't actually use async things inside of a user effect you have to do it in a special way you do this you say async function and you say fetch data so you write a little internal function right so inside of here we're going to actually do all the fetching and then afterwards you just call it you just say fetch data that's how you do it inside of a use effect so it's a bit of a strange one but you actually need to do it like that whenever you have an async right so now what we're going to do is we're going to say const request so we need to make a request and the way we're going to do it is we say await so await is going to say when you make this request wait for the promise to come back so wait for the answer to come back so if it goes off to a server even if it takes five seconds wait for it to come back and then do something so we say axios dot get and then here i'm going to use that fetch url that we talked about earlier so imagine what it's doing here is it's going here and it's starting you get this beginning url so imagine like this is what we're doing so we get that beginning url and then we pass in a url here so for example we passed in the fetch netflix url which if we go to this one is this so i'm just going to grab this and show you what we're doing and then here this is actually just going to because we're using the axios that we set up earlier it's basically doing this so this is the url it's sending a request to now but it will replace the api keyword with our api key nice does that make sense yeah so you see it's a very very nice slick implementation um and that but it looks very clean as well like we don't have to write much code to get that working and now what we're going to do is we basically so what i like to do at this point is do console.log request right so console.log request and and the reason why i do that is because i like to see what the data structure is that we get back because remember we don't actually know what so i need to just do a little something like here to return requests so that it doesn't freak out but here console.log request is needed so that we can actually see the data structure that we're getting back so i'm going to save this now and what i want you to do is if you full screen the browser so let's go ahead and full screen the browser and let's just open the inspector but let's go to our app so the the the local host version yep says open inspector and now on the right so if you've got a sort of console if you open up the console yeah we can see see there's an object right yep see it says object if you click that you see this is what's coming back from that request so there's two objects because there's two rows and each one has a different thing so now this is how you actually inspect what comes back so we're not interested in the config we're interested in the data and in specific we're looking at data dot results so that's how we sort of find what the structure is right this one so whenever you make a yeah so whenever you make any sort of api request a thing that people usually get stuck on is like how do i know what's coming back and a good way of testing that is console log it and then see what you're getting back so now we know that the stuff that we're interested in is inside of data.results so now what we do is um so we found out the data structure and we saw that it was request.data.results right yes that's the one request of data dot results so i'm just going to add that here so we have a note we're going to go ahead and set that inside the movies so i'm obviously going to get the request dot data dot results which was an it's an array and i'm going to go ahead and pop that inside of our movies right so what we need to there's one more step now so whenever you use anything inside of a use effect if there is any variable that is being you that is being pulled in from outside but it's used inside of the use effect you have to have to have to have to include it inside of here the reason being is because it's dependent on that variable so it's now a dependency so every time this changes we have to update our use effect so that way that is one of the things that i was actually getting really stuck in when i was building my own app with react and i had to use asynchronous function and so i just could not figure out how to get it to load but this is this is pretty sick okay because if you don't include that what happens is say i passed in a different fetch url it wouldn't re-render the use effect but it wouldn't re-calculate the user effects so you would have a you would you'd get a different answer to what you expected and that's why a lot of people run into an issue and then it gets very confusing when you're also combining that with async and and all that stuff so that's a very just a neat way of thinking about it now the way what i like to do just to get a little sanity check is i console log the movies to see if if anything's actually working or pulling through as we expect so if we go ahead and inspect the um the the uh screen we should be able to see now you can see that we get an array and that's got a bunch of movies inside of it oh nice so now that's all we're just getting here instead of getting old yeah beautiful you

Channel: Clever Programmer

Views: 59,462

Rating: 4.8986244 out of 5

Keywords: clever programmer, react tutorial, learn react, react course, reactjs tutorial, react crash course, react js tutorial, reactjs course, react tutorial for beginners, reactjs tutorial for beginners, react.js, reactjs, react js, react, learn reactjs, tutorial, angular, javascript, es6, crash course, web development, learn react js, Instagram, instagram clone, instagram clone react native, firebase, firebase tutorial, firebase database, firebase cloud functions, javascript tutorial

Id: lbHuwpPwfoc

Length: 10min 9sec (609 seconds)

Published: Sat Jul 25 2020