Full React Tutorial #20 - Making a Custom Hook

all right there's so we've put together all of this logic right here inside the use effect hook to update all of these state properties to output the data or a loading message or an error if there is one and everything is working fine and it's fine to be left like this but what if we want to do the same kind of thing in another component in the future where we fetch some data we create state for the data itself the error and is pending property etc we'd essentially have to rewrite all of this code in that component again and that's not very efficient it's not easy to manage especially if you're using this code in a few different places in your application so it would be good if we could make use of all of this code again in different components so make it a bit more reusable so we don't have to continually write it out again and again for example what we could do is we could rip it all out of this component and put it in its own javascript file and then we just import that into this file to use it and we could also import that into any other component that might need to use the same logic in the future and this way we're only writing and maintaining the code in one place and not in several different places over different components that need to fetch data so when we do something like this by externalizing the logic into its own file we're creating something called a custom hook in react so a bit like use states and use effect have their own specific functionality as hooks we'd be creating a custom hook with a specific ability to to fetch data so in order to make this custom hook the first thing i'm going to do is make a new file inside the source folder and i'm going to call this use fetch.js so inside this file we just need to place all of the functionality to fetch the data exactly as we did over here inside the home component but first of all we need to create a function to put the code in and this function will be the hook itself so i'm going to say const and i'm going to call this use fetch the same as the file name and set it equal to an arrow function now custom hooks in react need to start with this word use otherwise it won't work so use something or other in this case use fetch so now what i'm going to do is just copy and paste all of this logic right here i'm going to grab that and come over here and in fact we need the used effect as well so let me undo that and grab the whole thing right here including the use effect and we're going to paste it inside this hook right here now we do need to make some tweaks first of all we need to import use effect and also we need to register all of the states as well because currently the state is over here but we're not setting that state here anymore we're setting that state down here so let me also grab all of this first and paste it inside this function at the top so now we're updating all of these state properties and also what i need to do is import use state and use effect inside this file in order to use them so let's do that as well import use state and also use effect and that is from react okay so there's a couple more things i want to do first of all at the end of the whole file we need to export this function so we can say export default and then it's use fetch and that's so we can use this in other files in the future and other components let's get that right okay so that's the first thing the next thing i want to do is change this from blocks to be data because i want to make this reusable so in the future if i'm using this hook to fetch data it might be to fetch a different type of resource for example tags or categories so it makes no sense to call it blogs all of the time so let me change it right there and also i want to change it down here where we try to set the blocks it's now set data and i think that's pretty much it yep okay and by the way it doesn't matter that we call this parameter data even though this is called data because this is a local version inside this function so it doesn't matter that the names clash all right so i think the last thing i need to do is return some values from this function so you know that when we call some kind of hook over here we have the use state it returns some values right so we can do the same thing in our custom hooks so at the bottom of the use fetch function i'm going to return some values now what i'm going to do is return an object and place three values inside this object now the return value can be whatever you want by the way it could be an array like use states or it could be a string or a boolean in our case it's an object with three properties in the data is pending and error because when we use this use fetch hook inside another file in the future we want to be able to grab those properties from the hook that's what we want to get so let's return first of all the data then is pending and also the error so these three things okay so there's one more thing i want to do and that is to pass in the end point or the url into the function rather than hard code it here because again if we're using this use fetch hook in another file or a different component at some point it might not always be to the same endpoint so we don't want it to be hard coded right here so i'm going to cut that and instead we'll pass in a url as a parameter and that will be what we fetch so this is going to be the end point and we need to pass it into use fetch whenever we call it in the future now that also means that we're going to place the url as a dependency to use effect and that means that whenever the url changes it's going to re-run this function to get the data for that endpoint so that's pretty much this file done all we need to do now is import this use fetch function inside our home components and then use it so let's do that by saying const and we want to destructure the three properties we get back returned so data is pending and error so i'm going to say data is pending and error and by the way we could have used an array much like we get an array of values back from you state these could have been in an array instead but typically i like to use objects because then the order of these properties doesn't matter when we're destructing them and we can just grab maybe is pending without getting the others if that's all we want anyway let's set that equal to use fetch click on this and it should auto import it at the top and then remember as a parameter we need to pass through this end point so that's the resource we're trying to fetch so fingers crossed this should all work because now what we're doing is grabbing these three things back and then we're still outputting the data once we get it whether that be an error is pending or the blogs and by the way this is now called data but we're still trying to pass the blogs in so what we could do is pass in the data here instead and that would work or what we could do is name the data blocks inside this component by adding a column and then whatever we want to name it so we can call it blogs and that means grab the data but call it blogs in this context so now when we pass blogs in we're really just passing in the data all right so let's save this and see if it works yep everything works cool so there we go my friends that's how we can make a custom hook and hopefully you can see how this is much more reusable now we don't have to redo all of this logic in every component that needs to make a fetch all we need to do is one line of code we pass the end point in it doesn't matter what it is it's going to try and fetch that data and bring it back to us we get a loading state and also an error if there is one which we can use in that component and it also means our components look a lot neater and tidier as well and they're much easier to read

Channel: The Net Ninja

Views: 72,988

Keywords: react, react tutorial, tutorial, modern react, modern react tutorial, react 16, react 17, complete react, react vs vue, react tutorial for beginners, react for beginners, create react app, create-react-app, react course, react router, react hooks, react hooks tutorial, custom hook, react hook, hook, hooks, useFetch, fetch hook, react custom hook

Id: Jl4q2cccwf0

Length: 8min 49sec (529 seconds)

Published: Tue Jan 12 2021