Learn Custom React Hook in 12 Minutes | React Hooks Tutorial for Beginners

hey guys welcome back to another video in our mini series on react hooks so in this video we will learn how to create our own custom react hook we will write two different types of custom hooks so that you feel very comfortable in writing your own custom hook for your projects so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started all right guys so i have a very simple react application with a single component which is our app component and inside the app component we are using our favorite counter example again so here we are using the counter example and we are managing the state with the use state so if you don't know about the use date i have a video on it you can click on the card above and jump to it directly then we have two functions one is the increment of the counter and other one is the decrement of the counter and when we click on the button we actually call the increment function or the decrement function so right now if i click on the increment the counter increments and if i click on the decrement the counter decrements but what i want i don't want all the logic of my counter and everything in my app component i want to create a custom hook where i can pass the initial value and the custom hook should expose the value and the increment and decrement function so to create a custom hook what we will do we are going to create a new file so i will go here and i'm going to create a new file and it's it's a convention that whenever you create a custom hook you always use the same convention like the use state use effect so we are going to name it as use counter so i'm going to name it as use counter dot js okay so we have the use counter js our custom hook file and the first thing we will do we are going to do an export default and we will write the function and our function name is use counter all right so now we have the function so while creating a custom react toke we can make use of the inbuilt react hooks like if i want to use the use state then i can use the use state in my use counter so what i will do i'm going to import the use state so i'm going to import the use state from react so i'm going to write a u state here so let's add the use state all right and we will do the same thing what we have done it here so here we take a counter we do a set counter for the use state so let's do the same thing i'm going to create a constant and i'm going to have a value and then i'm going to have a set value function so this will be a set value and i will make use of the use state so this u state will get an initial value so let me add an initial value here so i will add an initial value and our custom hook will get the initial value when we are going to use this custom hook all right so we have added the initial value and what i want that my custom hook should return three things so i'm going to make a return and it going to return the value itself which we want to display it on the screen and then it should also expose the increment function and it should expose the decrement function so i'm going to write here as decrement all right so we have the increment and the decrement function and i made a little bit type pose so yeah so now we need to write this increment and decrement function so what we can do we are going to create a constant and that constant will be equals to increment and this function will be exactly same as the incremented decrement we have returned it here so we can actually take it here we can copy this and we can actually add it here so i'm going to paste it here and instead of the set counter this value will become the set value and here we need to add the set value all right so now we have created our custom counter react hook now let's try and use this uh hook inside our app.js so inside my app.js i'm just going to comment this out for now and what i will do i'm going to create a constant and what are we exposing we are exposing the value of the counter we are having the increment function and we will have the decrement function so let's add the decrement function and this will be equals to the use counter so this is counter i have imported it and i need to pass an initial value so let's parse an initial value as zero all right i will save it so this is going giving me an error in the use counter so let's go to the use counter and here this counter will get changed to the value so i'm going to copy this value here and let's add it here all right so now we have done it and now let's try it if i click on the increment it should increment the number so is it working and if i do a decrement it's working so this is how we have created this custom hook for the use counter now we can make more modification in it so let me do one more thing if i want to add one more button which is the reset button then we can do that so what i will do i'm just going to copy this and i'm going to add it here and i will make this as a reset so this and i'm going to expose a function for the reset as well and let's take one more function which will be a reset function and we need to add a reset function here so let's add the reset here and let's create a function so i'm going to create a constant that will be equals to a reset and we are going to create an arrow function and that is going to return new value so the new value will be my initial value so let me add this initial value all right and now if i click on the reset it will get reset to zero so increment decrement and reset so this will reset to zero now we can actually enhance this counter by taking a one more value and let's take a value of five and what we will do that whenever i click on the increment the counter should get increment by five and when i do a decrement the counter should get decrement by five so you can take one more value here whatever value you want and you will add the same value here and then what you will do and instead of adding one you will add the value which you get it from the initial counter so this is how you can actually enhance it more so this was one of the example the other example i want to show you is a little bit more complex as compared to this this was a very simple one so i'm going to revert this we are not doing that part so i'm going to remove this and i will also remove this as well all right and let's remove this here and i have already created one more component which is the screen component so if i open the screen component so right now the screen component only returns a screen component as h1 and then we have that we are in the xxx screen so what i'm going to do i'm going to import this screen component here so let's add the screen component from from dot screen component and i will add this screen component here all right so i'm going to add the screen component here all right so as soon as i added it says that we are in the triple x screen so what we want is we need to calculate the screen width and based on the screen that we need to decide that whether we are in a small device a medium device or a large device so as soon as i change my screen width it should get automatically changed to a medium large or small so for this we are going to write a custom hook so let's write a custom hook so i'm going to go here and i'm going to create a new file and this new file i'm going to name it as screen use screen dot js all right so we have the use screen dot js and here let's export the function so i'm going to export default function and name of the function will be use screen and this u screen is not going to take any initial value here first and we also need to make use of the use state so i'm going to import the use state from react all right and then i will what i will do i'm going to create a constant i'm going to say it as screen size and this will become set screen size and i'm going to demand use state so there is no initial value and what i'm going to return from here is i'm only going to return the screen size so let me return the screen size all right and this screen size will be the value whether it's a large screen medium screen or a small screen so to check the screen whether it's a small medium or large we need to create a function which is going to run every time and it going to check the screen size as soon as we increase or decrease the screen width so i will write a constant and my function is the check screen size this will be an arrow function all right and then inside this what i will do i'm going to write an if condition if the window dot inner width if this is greater than 992 then what i want to return i want to return these set screen size and this screen size should be equals to the large all right and let me copy this for the medium and the small as well so i'm going to copy this two times so this will become medium so i'm going to make it as medium this will become small and this will become large so for the condition to return a small screen this screen i'm going to make it at if the screen size is less than 600 then it should return a small screen and if the screen width is less than 992 and it's greater than 600 then we should be in a medium screen all right so i will change this to 600. all right so now we have this check screen and we have made the conditions that if the screen width is between this width then we should have the large medium or small scale respectively now what we will do i'm going to make use of a use effect so let me import a use effect all right and i'm going to write a use effect and inside the use effect so let's add a arrow function and this will be only called the one time whenever the component is mounted so i'm going to add the empty array here as dependency and we are going to call it check screen size function and we will also do an event listener that whenever we change the width we are going to continuously check the screen size so i'm going to write and window dot add event listener and the name of my event is on resize of my screen i need to call the check screen size all right and let's add the cleanup function as well so whenever the component is demoned or destroyed we need to do a cleanup so i'm going to return a cleanup function so this was an arrow function and inside the cleanup function i'm going to write window dot remove this event listener and the name of the event is resize all right so we have made our custom hook and let's try this custom hook so i'm going to go to the component screen and inside the component screen i'm going to add the constant screen size and this will be equal to the use screen all right and we don't want to take any initial value and let's copy this and add this screen size so i'm going to copy this and i'm going to add the screen size here all right so now if we save it then we can see that we are right now in the small screen and if i increase the width so let me increase this width then it will change to the medium screen so now we are in the medium screen if i increase it more than we are in the last screen so this custom hook is actually giving us on which screen size you are you are in a medium small or a large screen so this is how you can actually write your custom hooks so whenever you want to extract your logic from your component and you want to put it in the side then you can create a custom hook for that and even though if we see that this looks a little bit complex but when we use it in our component it's very simple it is just defined by one single line where you call the custom hook and you get the value whatever you want and you use the value so that's how beautiful the custom hook is so i really like the feature of the custom hook whenever i want to extract my logic from the component i create a custom hook and inside the custom hook we can actually make use of the inbuilt hooks so that's all i have in this video so i hope you understood how to create the custom hooks now and the complexity of the hooks based on your requirement as your requirement is complex you're going to create more complex custom hook if the requirement is simple you're going to create a simple react hook i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter i will add the links in the description below and before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 1,806

Rating: 4.9626169 out of 5

Keywords: custom react hooks, react, react hooks tutorial, react hooks, react custom hooks, how to write custom react hook, custom hooks tutorial, react custom hooks js, custom hooks, learn react hooks, react hooks project, react js custom hooks

Id: h2fh_pdISeI

Length: 13min 20sec (800 seconds)

Published: Wed Mar 24 2021