 In the previous video, we've made a login screen and also a logout screen at that and it's fully functioning right now The only complaint I still have right now about this code is that it has too much too too much repeating code And also a lot of the functionality is built right into this auth.js file And this file is supposed to only contain the UI components That is why in today's video we'll be making hooks our own custom react hooks to take refactor of the functionality code away from this UI component into its own hook So the first thing I'm going to refactor is the logout function because that's the easiest it seems I'm going to create a folder in our source directory called hooks and I'm going to make a hook here called useLogout.js And one of the main requirements of Making a custom react hook is we have to start the name of the hook with use Just like how just like the convention of how you have to start with a Capitalized letter as the first letter in a react UI component So we we're just going to make use logout and then we can just take the code here. Just take that And put it here so function logout Just put it here. So of course with the import PB and And we have also import you state from react and we can we can make that state variable here And then we can just return logout to the function to the hook function and then here I can just I can just do const logout equals to use logout Save that and we have to run this because it's a function that we have to run So yeah, everything should work and we have successfully refactored all of the logout code to its separate hook outside of this UI component And if I try it out So if I click on logout, it still works One thing I've noticed is that our email and our password is still populated and it's still in react state Even though we have logged out and we're supposed to be starting a completely new session here That's because we forgot to reset our form every single time. So we have we can The structure a function from use form called reset and we can just go to our Where is our our login here? We can just call what reset So that should reset our form By go to user at gmail.com and one two three four five Login if I go logout and it's no longer populated. All right now Let's refactor the code for log into its own hook as well I'm gonna go to the hooks here and make use login.js. That's export default function use login Use login and then we're gonna just grab everything here. I'm gonna leave reset Still here I'm not gonna grab reset as well because we won't have access to the reset function from our use login hook so up to put a function here called async function login and let's Close the brackets and then we have to take our loading state and just grab this and Put that here. We will also want to grab that. Just put it up here Let's see So I'm gonna rename the function here from login to on submit and Then we can go to a hook here. We have to import PB so import PB and We will need access to data. So let's go to the login function here and let's grab Email as well as password. I can get rid of data There and then we can just simply return login and we'll also return is loading and then here we just const login is Loading equals to use login and we have to import that as well So import use login and then just call login here and we have to pass data Dot email and the password. So everything should be working now What's oh with the error here, it's because I have to give email and password their appropriate labels Save that. So if I go to my page and refresh that I do user at gmail.com 1 2 3 4 5 login and it should work and we've Scarcely made our own hook for login and log out and we've taken all of the functionality and put it in their own respective hooks Now, of course, you could just leave it like this and it's completely fine It's perfectly functional, but there's still one thing that I'm not completely happy about our used login hook just yet And that's we're manually creating that is loading state and we have like the try catch blocks here And the code is just kind of clunky in general and we're gonna be making more calls to the API down the road And we're gonna be making more hooks to write to the database and stuff And we're gonna have to manually create a loading state every single time We make a new hook for different functionalities and there's try catch blocks and just clunky That's why I'm gonna use this hook from react query It's called use mutation and it'll simplify a lot of the code for us And of course use mutation isn't the only hook that I'm gonna be using from react query I'm gonna be using this other hook called use query as well, but that's for some later videos So in today's video, I'll just be showing you I can use me the use to use mutation hook to simplify a lot of this code so first we're gonna have to install the react query library and we just have to do yarn add react dash query and that should install a react query and in react query we can just import you can just import use Mutation from react query and just restart the server So here instead of returning our object that contains the login function and those is loading state I can just return use mutation and use mutation takes in I believe it takes in here Okay, let's just look at a syntax real quick It takes in here takes a mutation function as the first argument and a bunch of options and that's optional so the mutation function is going to be the function that we're gonna call to Basically post a request to the server and that's our login function. So I can just put login in here and Use mutation this use to mutation hook is going to return a bunch of things that we can use and that includes is Loading here. See it automatically generates that loading state for us So as long as we pass in an asynchronous function to the as the mutation function It'll automatically detect the loading state and so that means we can just get rid of our loading state code in here and Use mutation will just deal it just handle that first and I believe the way that works is summer and use mutations code It'll do something like oh wait login and then once our login is done It'll set is loading to true automatically So we don't have to deal with that and then another thing it'll do is it'll wrap try and catch blocks Around our mutation function automatically and so we can get rid of that as well and look how clean our code looks now It's everything's gone. It's just the core functionality that remains and we don't have to deal with the errors So the way the way errors are returned back to us is here instead of having the login function It's gonna be called a generic mutate and basically whatever function you put in here Use mutation was output as mutate. It's still the same function, but it's like wrapped around the use mutation Functionality so we can just put mutate there is loading remains the same There still is loading and that's coming from the use mutation hook and also use mutation hook gives us is error And that's a property that we can use to detect if there's an error and Let me just check where my error Where's where's my okay? I have to manually make that error message now. So you can just come here Where's the paragraph text here? It says loading. You can just say if error if is error is true Then you can just say invalid email or password. You could style this to be like red just to be fancy So color be just like red and then here instead of calling that login to this rename that to mutate It's a generic name or you could just rename mutate to login again that way we can reuse the name as login and Yeah, I believe that should work if I go and refresh this I just oh No, no query client set. So we have to fix that error So that's a that's if you go to react queries page and you go to quick start. It'll teach you how you can set up The provider so I believe you have to wrap your app in the query client provider And that's just something that Read query requires for me. So we have to go to our let's just go to index of JS here and just query provider Just put that here Wrap our app with query client provider and it has taken client So client let's look at how the docs do it. They have to make you have to instantiate a new client I guess so we can come up here. Just do Query client equals a new query client you have to import that so Query client, this is some boilerplate that comes with react query. Just set it up once and it'll be good to go forever, so We'll save that let's go back and refresh if I click log out and then now I try to log in I can just log into that fake email just click log in we should see invalid email or password and that way We know that our is error state is working and it's coming from our use mutation hook which is here Use mutation and also if I try to put an actual user Enter and you can see it works and you saw that the loading state was working as well Despite us not having any you can just get rid of the state It's spiders not having any code to deal with the loading state. It still works and use mutation is awesome in that sense