All React Hooks Explained in 1 Hour | React JS Hooks Interview Questions | React Hooks Crash Course

hey everyone welcome to the react interview series all react hooks revision within 1 hour so in this particular video we are going to cover all of these hooks we'll start with use State then we'll be learning use effect use context use reducer use ref use layout effect use memo use call back and at the end we're going to finish with use fetch which will be a custom hook now this video is going to help you if you are having any react just interview so this will be kind of a revision all right so for starting so if you like this particular video give a like comment down and please subscribe to my channel let's get started and good luck let's start with our first hook and this is called UST state so UST State Hook is basically used to manage your component State now what is a state so state is basically a piece of information that will change on doing something so for example if the user is performing any action let's say they're clicking on a button or they typing on any input or any text box so your component State value will change and whenever the state value will change that changed or updated value you want to render in your UI so in that case you need to store that updated State somewhere so that is the reason this usate hook what it will do this will basically will take a state variable and there will be a set state acction which will update your state and then you'll be basically getting the updated state that you can render in your UI so let's see how we are going to do that so for this one you can see that I have a button and there is a text now on click of this button I want to toggle this particular text so how we can write use State all right so to use US state first we need to import it from react so what we will do so we do import something from react and the name is use State all right now here you have to first initialize your use state or basically you to take the state value so here I'm taking this state variable now here basically you can take any name you want so for example because here we are toggling this particular text so we will take this one as toggle text and then this will beate variable and then there will be a set State method which will update this variable here so here I'll do set toggle text now here we will use this eate now here you can see that this will return return a state fold value and there is a function that will update this value so this is the function and this function will update this toggle text State variable here so here in this U State you need to basically take a initial State now initial State can be anything so it can be a Boolean it can be a string it can be array it can be object it can be null and anything you can want so for example I will take initial State here so I'll do initial State and this will be for example because this is a Boolean so what I'm going to do I'll do this one as false so my initial state is a false so here I'll copy this and I'll pass this one here so that means this is my initial value so first time this toggle text will be false so let's see what will happen if I now simply log here toggle text let's save it and now let's open our console so you can see that we are getting false here all right so now what I want to do on click of this button I want to change this state variable from false to true and vice versa so if it is true it will be false if it is false it will be true how we are going to do that now we have to basically achieve this on click of this particular button so here we need to basically take a onclick event now here you can give any name you want so I'll give this one as handle toggle text so now this function we need to create so we'll create here function handle toggle text and here what you need to basically do we need to take this set State method which is a set toggle text now this will what it will do basically this will dispatch a accent which will automatically update this uh State here so for example what I want to do I want to basically make this toggle text from false to true and true to false so what simply we can pass we can do like not equals toggle text so that means if it is false it will be true if it is true it will be false so first time it is now false let's see what will happen if I now clear this click on this so now this is true click here this is false true false all right so now simply we can use a Turner and and we can give the condition that if the toggle text if this is true then only I want to render this or else I don't want to render anything so it will be null so let's format this save it so now first time you're not able to see because this is false click here we able to see click here this is working fine what will happen if I now change this one from false to true so initial state is true that means first time if I now refresh this you will be able to see this one all right click here false true false true this is working fine so in sum up you state will take a state variable it will take a set State method and then you have to use the US state hook which will basically take a initial State and then whatever activity that you want to do you have to basically take this set State method which will update your state variable so this is a very simple one now let's understand this one with a little bit more more complex uh example let's explore another example so here you can see that we are having two very simple inputs now whenever user will be typing something I want to basically render that value here same for whenever they will be selecting any City here I want to render that City value so for this one the first thing what we need to do again this will be the same process you have to take your state variable the set State method and the initial State now in this case your initial state will be there will be a name and you have to also store a city so what you need to do here I'll take a object and here I'll take name which will be mty for the first time and then there will be CT which will be also empty so this is your initial State now you'll notice here one thing that the same name and City this is the name of this input and this is the name of the select that I've given here so now what you need to do we'll take variable and here I'll give this one name as for example form data this will be restate variable and now it's always a good practice to write your set State uh method starts with set so that it implies that okay you are basically updating your state variable with this method and here I'll give set form data now here again you have to take the US state and you have to pass the initial State that's it now let's save it now what we need to do whenever user will be typing something we need to basically update the value that means this is also user input acction so here you need to take a on change method so I will take here on change and let's give this one name as handle name change same for the select here I'll take on change and we'll give this one as handle CT change now let's go there and we'll create these two method so this will be handle name change now this will basically will eject event same for your handle City change so this will also give you event now from this event what you will be basically able to extract the targeted value or basically the user whatever they'll be typing you'll be able to extract that value from the event. target. value now because these all are very simple Concepts I'm not explaining all of these but let's see how we are going to update this set form data so here what I'm going to do I'll take set form data I'll notice here one thing that you can't directly update uh the state because here you have multiple initial state so what you need to do for example let's say you are having something in your city whenever you'll be updating the name you have to keep the city value as it is so in that case what you need to do basically whatever initial State you are having that you need to first store and on top of it you have to update the current uh variable I hope you're getting so now because in this case we are updating the name so first we'll keep the city as it is and we'll update the name when we will be updating the city we'll keep the name as it is and we'll update the city how we are going to do that so here simply because this is object first we'll destructure our original form data all right so this will be our form data now here I'm going to do because we are updating the name obviously there is a much better way of doing this one so we going to discuss but here directly we update the name and this will be our event. Target dot value all right now let's save it now the same goes for this one also it will do set form data and here we'll do form data and here I'm going to update the city which will be again event. target. value let's save it now let's log here form data and let's see what we are getting all right so first time name and city is empty I'll type something here my name so you can see that these name is getting updated if I select a city so city is now bangaluru if I select Mumbai this is now Mumbai if I now change the names to something else you can see the city is still Mumbai only the name is getting updated if I update the city city is updated name is as it is so now what you can do simply so here we can basically take here like uh we'll do something like let's take another div and inside this we'll do a form data or let's do this one as name is so name will be your form data do name and then we'll do city is so this will be your form data. City all right so you can see that also let's give this one as a p so that it will be easy to understand all right now if I update this one so this is getting updated if I change the city this is also get getting updated now let's see how uh another way that how we can do that directly instead of creating these methods individually so we can basically write this one directly here so what we can do simply we'll cut this one and we'll take a method all right now here because this will give you event so we'll take the event and what we can do simply we'll do set form data so here first we'll destructure our form data and then here either we can do like name is equal to event do Target do value all right this will also work the same thing you have to do it for the city also instead of name this will be City now let's save it now let's refresh this now this will also work so you can see that this is also working now another way is that because here you can see that you'll be basically getting the event. target. name all right so what you can do you can basically d dynamically take this one like this so this will be your event. target. name now event. target. name it will automatically pick up from this name that you have given in this input that means instead of explicitly writing the name you are targeting you are targeting the event. target. name which is basically name here this value so this will also work and same you can do it for here also because in this case even. target. name is nothing but City now let's save it and update and you can see that this is also working all right so this is all about our first and very useful hook that you will be using most of the times whenever you have to basically manage any kind of component State now let's move on to the second hook which is use effect all right so let's start with the second hook and this is called the use effect so use effect is another very very important hook that basically used to manage any kind of side effects in your component so for example let's on page load you want to do certain operations you want to call an API so in that case you can use the this particular hook and also you can do some other things also so you can see that here basically we are having this button and there is a count now let's say whenever this count will be going to till 5 I want to do something I want to render something in the UI so that means in this case you have to track this particular count value and you have to check whenever this count value will be five I want to do that certain operations so let's see how we are going to achieve this using use effect so the first thing is that we have to import use effect from react and now here we'll take this use effect now this will take a call back so you can see that this is the effect call back and here the very very important this will take a dependency list and based on this dependency this will behave the same way so for example this dependency will be empty array that means now this use effect will only run once on page load and now if I now log here let's say I'll do console. log and and we'll do run only once noticed here if I now save this so you can see that we are getting this one on page load all right so that means this will now only run once if I now change this count value that means the state is changing but this use effect is not getting rendered now let's see what will happen if I now don't give this dependency areay here now another very important point is that you can basically take multiple use effect now for example let's say whenever you'll be creating very complex application so in that case if you write all of your logic into one user effect so code will be very messy so it will it is always better to divide your code into multiple use effects so that's not an issue all right so let's see if I now take your use effect and I'll don't give anything here and just I'll do console.log and I'll do Hello World save this so you can see that we are getting hello world on page load and what what will happen if I now change this count value so that means this is now getting every time every time this component is getting rendered this use effect is also getting called all right so here you can see that there is no dependency all right so now let's see how this dependency will work so what I want to do basically whenever this count value will be five I want to render some text all right so let's see how we can do that so the first thing is that I will take a A3 here and let's give this one name as hello world only all right now you can see that we are getting this hello world but I don't want to render this hello world on page load or at the start I want to S this one whenever this count value will be five so let's see how you can do that so here in this case the first thing is that I will take another state that will basically manage whether I want to show this text or not so here we'll do const and we'll do so text and this will be set so so text and this will be U state of false now this false is basically your initial state so now what I want to do basically this whenever this s text is true then only I want to render this text or else this will be null now let's format and save this now you can see that we are not getting this text so now I want to do whenever this count value will be five I want to basically make this so text variable as from false to true so in this case whenever there is a dependency on some State variable here you can basically take another use effect so now I'll take another use effect and here instead of this empty dependency now which dependency you need to basically take so you can see that because currently this is depending on this count value so count value whenever will be five I want to show this text so here this count will be your dependency I hope you're getting so that means now what I can do simply we can check if this count is equal to equal to five that means the count value is five I want to make this set so text as true now let's save it all right so now let's see what is happening here so now first time this will be false now let's see if I increase one 2 3 4 5 so now this is true and you are basically able to see this text so this is how you need to basically take this dependency and based on this dependency you can do certain operations now let's see how we can basically call an API using this use effect on page load and on based on this particular dependency also so for this API call we are going to use this dumy Json AP endpoint so let's see which endpoint that we can use so let's P these all products all right so so let's copy this endpoint now what we can do because we need to basically rer all the products on page load that means it should run only once so we can take with empty dependency so here what we can do simply we can basically call a method so we'll do as sync function and this will be fet all products and here we'll take a tri block and catch for now we just log the error and here we'll do const response AIT fet we'll pass the endpoint and we'll do result which will be AIT response. Json all right now we need to also store the products so we'll take another state here so this will be our product list and set product list which will be UST state of MTR now here what we can do simply so you can see that we'll be getting this products so we'll copy this so we'll check if this result and then result. products true so we'll do set products list will be result do products all right that's it so now what we need to do so that means we can simply call this method on page load inside this use effect so that means this will run only once now let's call this method here now let's see what will happen if I go to network tab the point I'll save this so you can see that we are getting this products in point and here basically we getting the list of products all right so now what we can do let's say I want to render this title here so we can go go here and simply take a e will and inside this uh we will do product list. map and we'll do item simply we'll take Ai and we'll render the item do title and also we'll give some check that if the product list and then product list. length if this is true greater than zero then only I want to do this ORS this will be null so now let's format and save this so we getting the title here all right now let's say what I want to do instead of calling this one on the page load I want to do whenever this count value will be 10 so now pause the video and try to do by your own so what you need to do so instead of so you can see that you are already doing the logic here that if the count is five I want to do this thing now obviously you can do the same thing here also but because uh we are learning this one from scratch so let's do one thing we'll take another use effect so that it will be easy for you understand all right obviously again I'm repeating you can do the same thing in this use effect also but this is just to keep everything simple so again I'll take another use effect I'll keep the count as a dependency and I'll check if the count is equal to equal to 10 then only I want to call this method which is fetch all products and I'll just comment out from here now let's see what will happen save this so you're not able to get anything and then you'll noticed I'll do 1 2 3 4 5 6 7 8 9 I'll do 10 see this is getting called and you're getting the result here all right so this is basically how you can use use effect to manage any kind of side effects now here you can also do a cleanup so let's say you want to do some kind of cleanup once the component will unmount so to do an any kind of cleanup what you can do you have to basically return a call back function inside this use effect all right so this will be a call back and inside this you can do any kind of cleanup that you want to do for this particular component all right so this is all about our use effect hook now let's move on to the next one let's start with our third hook and this is my favorite hook and that is use context so context is basically a concept in react where you will be managing a state globally and use context is a V where you'll be basically consuming that state from the context and based on that you want to do certain operation in your component so let's understand this one with a very simple example so here you can see that we are having a use context component which has a button where we will be basically able to change the theme and then there is two separate component and these both are Standalone component so there is no direct connection so you can see that I have this component one which is let's say login component and then component two which is a registration component and these all the component I am basically rendering in the app. chase what I want to do basically whenever I will be clicking on this particular button I want to change the color of this button same for this button and also the text color all right now in this case what we are going to do we will be managing the state globally using context and then we want to extract that state in both the components and based on that we want to change the style so let's see how we are going to do that so the first thing is that to create a context you have to basically create your context and here what we can do simply let's do one thing inside this Source I'll create another folder and I'll give this on name as context and here we'll do index.js now the first step is that you to basically create your context so here you can give any name you want so we also need to export this context because we are going to use this one and and I'll give this one name as Global context so whatever state we'll be managing we'll be managing in this globally in this particular context so to create a context we have to import this create context from react and here you have to basically give the initial value or the default value so I'll give the default value as null for the first time now next thing is that what we need to do we have to basically create the global State now why you need to create the global state so this is a very important interview questions because this is a state which we are managing globally so that means in this app.js this app component is the combination of all the sub components that we are having in this particular component so for example let's you can see that we are currently having one two and three component but as the component or basically application will grow these components will also basically increase so in that case what we need to do we have to basically create a global State and then we have to wrap our app.js into that Global state so that this context or basically the global state that will be managing from this file that we will be able to access in all the nested components so that is the main reason so let's say how we going to do that so here I'll create a function and I'll give this one name as Global state so this will be a global State and now this will receive the children as a prop now what is this children this children is basically all the nested components that we will be having in this app so that means this all of these all right all these are nested children that sorry the children of This Global state that will be passing here so in this file and here what we going to do is basically return so we return This Global context now this will basically eject a provider a consumer and there is a display name which is basically a optional property so now this will be a provider and here I'll be passing this all the children that children components that will will be receiving from our app.js or basically the root index.js so this is that's it now here in this provid you have to basically pass a value all right now this value will be object so for now I'll be passing this one as a empty object so now this is your Global State now what we need to do we'll do export default and we'll do Global State sorry this will be export all right so that means we have exported This Global state so now how we are going to use This Global state so I already mentioned that we have to basically Wrap This Global state in our index.js which is basically wrapping this app so here I'll cut it and then we'll import our Global State and then we'll pass this app so now what is happening so now you can see that this app component we are passing as a children to to This Global state which is basically this children it will be receiving and this app component is the combination of all the child components that we are having all right so this is the step now this is done so let's say now what we want to do we'll be managing a state in this component and that will be a theme and then it will be a set theme so here I want to take this theme as use State and this theme will be first time let's say light so this is the our theme which we can basically able to access in all the children component so let's say how we going to do that now you want to basically pass this theme property into this value which will be your context value so here I'll copy this and I'll pass this theme and also this set theme now let's format this now let's see let's go to our use context and here let's say I want to do something I want to get this theme and set theme value so how we are going to do that now here this use context hook comes into picture so to get that context value you have to basically get that from using use context so let's see how this will work so we'll do something like this we'll do context we'll do get context value and this will be use context and here you have to pass the context so you can see that this will receive a react context so here you can see that we are already having this Global context so this is our context name so here I'll do Global context now let's log this and let's see what we are getting in this context value so save this we'll go to our console you we are getting a object and here we getting a theme which is light and there is a set theme method which is basically a react dispatch method now from where this is coming so this is coming from this value that you have passed here all right so that means now you are able to basically extract this one so instead of doing like this it's always better to destructure so let's say I want to only get the set theme so here we can simply take this set theme all right now what we can do simply let's say if the theme is is light I want to make this one dark and if this is dark I want to make this one light so I'll also take the theme here and then in this button I'll take on click and we'll directly do set theme and we'll simply check if the theme if this is equal to equal to light so I want to make this one dark or else I will make this one light let's format this now let's see here I just log this theme and save this let's see what we getting so you can see that we getting light now what will happen if I click on this change theme so now this is dark light dark light so that means what we are doing basically on click of this button we are changing the theme now this is very simple so you can go to this individual component although you can see that we don't have any direct connection between these components so this is the advantage and beauty of this use context or basically the overall concept uh concept of this context and this is is one of my absolute favorite feature of react and now what we can do simply let's say I'll take this theme so again do the same thing we'll do theme will be equal to use context of global context and then here we'll do directly we take a style and we can simply check here something like this that if this theme is equal to equal to let's say light or let's do this on dark and here ah sorry so here we'll pass a background color so we'll do background color as black and we'll do color as white all right so if this is dark I'm doing background color black color is white and then I'll do the opposite if this is light I'll do background color as let's say yellow and I'll do the color as black let's save it let's see what is happening if I click here see this is getting changed right CH click here and this is working fine the same thing we can do in the component two also so I'll again do the same thing so do const this will be theme which will be use context of global context and here I'll do the same things we do style here we'll do theme if this is equal to go to let's say light and uh first we'll do for dark so if this is dark let's say I want to do background color I'll do something different so I'll do this one as red and I'll do the color as uh I'll do uh what we can do for example blue whatever or else I'll do background color if this is light I'll do background color as green and color I'll do orange let's see what is happening now I'll now save this see now on page this is already getting changed because first time this is light I'll click here this is getting changed this is also getting changed see if I refresh this page this is on the first time this is light click here this is working fine so this is the overall concept and this is pretty simple you just have to practice so whatever state that you'll be managing you'll be adding this state here you'll be passing the state in this value and then you'll be able to extract that value using this use context hook so that's all for this particular hook now let's move on to the next one all right so let's understand use reducer H so use reducer you can basically say as a alternative of use state so whenever you are having some kind of complex State scenario you can use this use reducer hook so let's see how we are going to do this one so you can see that we are basically having four buttons and on click of each and every button we were going to basically manage some counter State and you notice one thing is that we are keeping each and every example very simple the reason is because this will definitely going to help you to understand the concept very easily and also this video is Created from a interview perspective so let's say you are having some react interview and you want to revise all the HX concept then uh if you are practicing with some very simple example it will going to help you believe me or not so let's see how we are going to implement this one so the first thing is that we need to basically import use reducer obviously but before that this will basically take some of the uh steps that you need to follow so the first thing is that there will be a state so this will basically hold all the component State then there will be a dispatch method now this is very very important now this dispatch method will basically dispatch certain properties which will this use reducer or basically the reducer function that you will be creating that will receive but before that first let's use our use reducer now here you you can see that this use reducer will basically receive a reducer so you can see that this will receive a reducer and also there will be a initial state so here I'll pass a reducer which will be our reducer function and then it will take a initial State now we already know the concept of initial state so for this one I'm going to take a initial state which will be so here I'm going to take a count which will be zero so now this is my initial State and now here I'm going to basically take our reducer so here I'm going to create our reducer so this will be my deducer function reducer will simply receive a state and also it will receive a action all right now we are going to basically understand this one but before that you can see that this is our state variable and this is our dispatch function all right now let's see like uh log here this state here and let's see what we getting so the first thing is that inspect go to console so you're getting object and here we getting count is zero so this is our inial state now here what we want to do basically whenever I'll be clicking on this each and every button I want to dispatch certain accent to this particular reducer now in this accent there will be identifier now this identifier is basically a type and based on this type you will be like deciding what functionality that you want to do for for example if I click on this increase count button I want to increase the count if I click on this decrease count I want to decrease the count so that is the reason here I'll take on click and we will basically call this dispatch now this dispatch will be a function and here I'll be passing a type so let's say I'll pass a type this will be add all right so that means we basically telling that whenever I click on this particular button I want to do a add add functionality or basically I want to increase the account so let's see what will happen if I log here this state and this accent all right so now let's save this now let's see what we are getting in this uh state so now I'll refresh this uh and now noticed if I click here see on line number 10 so here we are getting state which is zero and then there is a type of ADD and undefined because we are not returning any updated State because of that we are getting undefined but what will happen if I now simply copy this and here I'll pass because this is decreased I'll do let's say substract save it now notice if I click on this on we getting a type so now we'll notice what we can do simply we can take a switch and based on this accent. type we will be able to differentiate that okay on click of this button I want to add on click of this button I want to substract so here I'll do a switch and here I'll do switch based on this accent do type I hope you're getting because this is the type we are getting so now here we'll be getting add and here I want to return something then we'll be I'll be adding another case and this will be substract I want to return something again I'll do another case and this will be our reset so we are having a reset button and then there is a so count so we'll do another case and this will be so count and in default always we should return the state now here for each and everything that whatever functionality we want to do we need to return the updated state so how we can do that so simply whenever I'll be adding this one so first I'll take our state and then because we're adding so we'll take our count because that is the our state variable name and we'll do state. count + one so that means each and every time we are clicking we are basically updating the count value similarly for substract what we'll do we'll again do state and then we'll do count and this will be state do count minus one then we'll be having reset so for reset we'll again do state and then we'll do simply count will be zero now we'll go here and then we'll copy this and we'll pass here type as reset and here I'll pass this one as so count now for so count what we want to do basically we want to uh hide or toggle this count value here so for this one we'll take another uh state which will be so count flag and this will be let's say true for the first time now here on this so count what we want to do we do state and then we'll do so count flag will be not equal to state do so count flag that means we are toggling now let's save it now let's save what is happening and here uh we want to render the count value so we'll do count is and this will be our state do count all right so now let's save it and now let's see what we are getting all right so now we are getting count is zero so if I click here count is increasing decreasing and this is resetting now what I want to do you want to basically give the logic here that if this count flag is true so we'll copy this then only I want to render so do if this state do so count flag if this is true then only I want to render this or else this will be null now let's format this save it so first time this is zero I'll increase in click here now I can see that this is hiding click here now this is again it is showing decreasing reset and this is working fine so this is how you need to use use reducer so I'll just recap everything so first you need to take a state variable which will basically store all the updated state in your component then there will be dispatch method dispatch method will basically dispatch a accent which will consist of this type and this is mandatory because based on this type only you will be differentiating that what uh case you need to run and based on that it will return the updated State and then basically in the use reducer you have to take the reducer which will be simply a function which will take the state and the accent based on this accent. type it will do something and it will return the updated State and also you have to take the initial state which will hold all the initial State value for this particular component so that's all for this particular hook which is use reducer now let's move on to the next one all right everyone so let's understand another very important hook and that is called use rep so you can see that the definition of us rep is basically this is a react hook that lets you reference a value that's not needed for rangering and also with this particular hook you will be basically able to manage any kind of do Dom elements so let's see how we are going to uh use this one so for this one the first thing is that let's say we are having a value and that is my count value now to use this one obviously we need to import it from react now again you can see that this will return a mutable reference object and here you'll be able to access this current property and then you have to basically pass initial value just like you have passed in use state so here I'll pass initial value of zero all right now here let's I'll have a button and this is Click me and I want to do something on click of this I'll have a method here all right now I'll create this method now here what I want to do basically I want to increase this uh value by one how we are going to do that now here you can see that this is basically mutable reference object which is a type of number so what we can do we can simply take this count value now again I has already mentioned that this will give you the current value and now I want to increase this count value by one every time I'll click on this button now let's see what will happen if I now loog this count value do current let's save it I'll see that click here now you can see that we'll be able to basically get the updated count value all right so this is one concept now let's understand two more so let's say we are having a div and with hello world and there is a class name of hello now uh you want to access this particular div on page load all right how you are going to do that so for example you can do like anything with this particular div to access this one you need to basically give a reference to this particular div so I'll give this one as div reference now again we need to create this div reference so I'll do const div reference will be of use R and now because we want to access on page load so we'll do use effect and now simply log this uh let's do const gate div reference and this will be our div reference do current and log this get div reference now let's save it all right so you can see that you are able to basically access this element only now whatever you want to do you will be able to basically do your operation here now this is one thing now another thing I just want to mention and that is a very important interview question also so for this one we'll take another input and here I'll take a type as text and placeholder let's say enter some points all right what I want to do basically on page load I want to give some Focus to this particular input now again this is the same concept so first you need to take a reference let's say this will be our input reference let's copy this and then we'll do const input reference which will be use ref now here we'll do use effect and on page load we'll simply do input reference do current and we'll do Focus so that means on page load we want to do Focus so now let's save it let's see if I refresh this page see now this is getting focused right you can see that one more very very important point is that when the page will load for the first time that means until unless the all the Dom elements are getting rendered in the Dom tree this reference will be undefined and this is a very important uh interview questions also see what will happen if I now just log this info reference do current let's save it now let's refresh this see first time on line number 26 this is undefined and the reason is because when we loading this one for the first time that time this browser is still paint uh the paint paint process is basically going on so paint is one of the process so until unless this paint process will be completed all the Dom elements will not be rendered so that is the reason you are getting undefined because this input is not yet created in the Dom tree so that is the reason because this use effect is using this call back so that is the reason once the Dom elements are getting rendered that is the reason you are not getting any undefined here so if I now log here this input reference do current so you'll be able to basically see this one if I now refresh this so you'll see here it is undefined but on line number 24 inside this use effect you are basically getting or uh able to access this input reference or this input element here so this is all about very basic understanding of us ref now let's move on to the next one all right so let's understand another hook and this is called use layout effect now as you already discuss the use effect so this Hook is almost similar to use effect but there is a uh slight difference so the difference is that whenever the component is basically getting rendered there is a process that we call as paint so use effect is basically called once the paint process is completed by the browser on the other other side use layout effect will be called when the component is rendered but until unless the browser will complete the pain process it will not wait before that only these hooks will be getting called so let's see with some example now also you'll see that these both use layout effect and use effect are almost similar so let's I'll take here use effect and then let's take a log here and we'll do use Effect called now to use the use layout effect this is exactly same so this will also take a call back and here also you can pass the dependencies and let's log here use layout Effect called if I now save this you'll see that both are basically getting first time all right and almost at the same time and it is very difficult to differentiate but because because this layout uh this layout effect Hook is basically called once the paint is completed by the browser so this can be very helpful even uh let's say you want to do some kind of Dom operations so in that case you will be able to use these hooks very easily so for example let's say we are having a div and then uh I'll have a text of hello world if I now save this and refresh this page you can see that we are basically immediately getting uh the text because the component is getting rented and the paint process is completed what I want to do I want to display this text after 1 second so that means I want to manipulate some of the style of this particular text so how we are going to do that so in that case we have already discussed the use rev so we will be basically able to give a reference to this particular div and then using the current property we will be able to manipulate that inside this use layout effect so let's say how we are going to do do that so first I'll take a ref here and I'll give this on name as div re let's copy this and then we'll do const d r we be use R and here now what we can do simply we'll do const get div rev current and this will be our div R do current and now let's log this and let's see what we getting so we do log here get div ref current so we are basically able to get or access the div element so now what we can do first we'll do get div ref current do style and do opacity so first I'll do oppacity of zero and then I'll take a set timeout so that means let's after one second I want to display this so I'll do get div ref current do style do opacity is equal to 1 and also let's say I want to give a color of sorry we'll give a color of uh orange and let's see what is happening let's save it see so now you are able to basically see this one and if I go here so we getting opacity of zero color let's make this one red all right so now you notice One Thing Once I refresh this page first time this is opacity zero immediately this is becoming opacity one so this is a very simple one so just want you to understand that you will be able to do any kind of Dom manipulation inside this use layout effect if you want to do it now another example I can give you let's say uh what I want to do I'll have a input and we'll take a type of text and we'll give a value of suum I'll save this so you're getting this value here all right now what I want to do I want to change this value on page load so let's say I first I'll take a reference so I'll do ref and this will be input ref I'll copy this and let's create a ref here so we'll do use ref and then inside this I will basically change the value so we do input do current. value to something else we'll do John do very famous name so let's save it so this is getting changed to joho now noticed one thing what will happen if I log this value here so we'll do input ref. current now let's save this and let's see what we are getting so I refresh this so you see this is getting changed to joho but here if I go to this input this still showing the old value all right so that means this is not getting updated so this is basically the very simple difference that this used layout effect will run once component is getting rendered but before the browser will complete the paint process on the other side use effect will run after all the component will be rendered and also there will be a state update and the paint process will be completed so that's all for this particular one now let's move on to the next one all right so next two hooks that we are going to learn the first one is use memo and use call back now both the hooks are basically used for uh performance Improvement purposes so the first one is use memo so you can see that the basic idea of use memo is that it allows us to remember a particular value now what exactly we mean by that so let's understand this one with this example and it will be very very easy to understand so you can see that what we are currently doing we are basically fishing some list of data from a API endpoint all right now here you can see that we are having a state and we storing the data in this uh data State variable so now let's log this here so we'll do data so you can see that we are getting this 30 data now what I want to do I want to filter this data and I want to let's say render only those records where the price is greater than 50 so first I'm going to implement this one so here what I will do so let's I'll create a function and I'll give the name as filter products by Price all right now this will receive the products and here what I'll do I'll just return this get products dot filter and here we'll do item and here I will do item. price has to be greater than 50 Also let's give some condition here if the length is greater than zero then only I want to do this one or else this will be empty that's it now here I will go and then take a e and we'll just render this filter products by Price this will receive the gate products which is basically this data that we are having and then filter products or I think we can directly now map this one so you'll do map here because this will basically return the arrrow of objects we are filtering based on price so we'll do item and we can simply return Ai and we'll do item dot title let's save it so you can see that we are getting only this many products so all these products have a price of greater than 50 now this is not the point now what I want to do I take a totally different state which don't have any d direct connection to this particular state or basically this function that we are writing here and let's see what will happen so I'll take another state let's give this one name as theme set theme which will be US state of false and here I have a button and on click of this button I want to toggle the theme so I'll do button and this will be toggle theme and on click of this button I will do set theme will be not equal to theme and here I will render if the theme is let's take a paragraph or let's take a h two and I'll render if the theme is true I'll simply show here light or else I'll show here dark now let's save it and I can see that if I click here this is changing now what will happen if I just log here that this is getting called let's see what will happen now let's save this so first time this is getting called this function is getting called that is correct what will happen if I now click on this button now notice one thing these button don't have any connection on this API call or basically with this data click here this is getting called again click here getting called again now for now this is a very small amount of data now it is also uh like mentioned in the react do documentation also is that you don't have to use use memo and use call back all the times you only needs to use these two hooks whenever this is absolutely necessary let's say you are having large amount of data in that case let's say you are managing multiple State and there is no direct connection between uh one state with another state so in that case what what you can do you can memorize a particular value using this use memo and in this case also you can give some dependency that okay I only want to run this function whenever this data value will change or else I don't want to run because why would I want to run this if I click on this button right because there is no direct connection so let's say how we are going to do that so here you have to basically memorize this value all right so how we can do this we'll do const memorize filter will give filter product by price so we memorizing this value using this use memo all right and here you need to take this use memo which will take a function and here now inside of this I'll call this filter products by price and here you need to pass the great products which is data and now you need to basically give the dependency and use memo will only recompute the memorized value when one of the dependency will change so here I'll give the dependency as data because this data is this gate products dependent on this data that's it now instead of calling this function I'll simply call this memories uh this filter products by Price save this we'll be getting the same result all right now let's click here see the function is not getting called so this function is now not getting called the reason is because we are now managing a totally different state or basically updating a totally different state variable which don't have any direct connection with this one so this is all about the use memo whenever you need to basically memorize a value based on some particular dependency you can use this use memo hook all right so now that's all for this particular hook now let's move on to the next one all right every so so now let's quickly understand what basically use callback is now just like we have understood use memo use callback is almost similar the only difference is that use memo will memorize a value on the other side use call back will memorize a call back or basically a function so let's see or understand this one with this very simple example and I can guarantee you that this is going to help you because if you're getting this particular question since interview then you will be able to explain this one with the simple example so here you can see that we are having this component and here having two State one is count one and count two and then there is a reusable component that I'm using which is a button component or child component so this will render a button and which will have a text which will receive and then it will also receive on click as a prop which I'll be passing in this button on click all right now here what I'll do I'll just log here that child is rendered and then I'll pass this text let's save it now you can see that child is rendered both button one and button two all right and I'll go here and let's I'll give a on click and here I'm going to do set count and I'll do count + one copy this and I'll pass it here and I'll do count to and this will be my set count to now what will happen if I click here both the component or child component is getting rendered although this button TST state is not getting updated if I click here similarly Now button two is updated button one state count value is not getting updated still it is getting rendered all right so that means we are rendering all the child components although the state is not getting rendered for that particular uh button click so how we are going to prevent this one so in that case this function that we are passing to this component as a prop we can basically uh wrap this function inside use callback and we can give the same dependency that okay if the count one will change then only you render this component if the count two change you render the second child component or basically the uh child or button two component so let's say how we are going to do that and this is pretty simple now again this is very important that you should not use or make a habit of this particular thing that I'm going to use use callback and use memo all the time this is not ideal scenario you can also read the official react doc if it is absolutely necessary then you can obviously use this one so we'll do const and we'll do memorize uh we'll do set count one function and here you just have to call use callback and we are going to basic basically pass a call here we'll do the same thing set count is count 1 + 1 and here you need to pass the dependency so in that case if count one will change then only I want to do that same I'll do memorize set count two function which will be use callback of set count 2 this will be Count 2 + 1 and here and I'll pass the count to as a dependency that's it now instead of passing this one we just have to pass this one so we do memorize function one and this will be my memorize function two all right so this is done now next thing what we are going to do we'll go here and then we'll wrap this component into memo so we're going to import this one with memo and then we'll pass it let's save it now let's see what is happening so refresh this so so first time this will be getting rendered if I click here only child is rendered and button one so that means only the button one or the first child is getting rendered because this value is getting updated if I click here now you can see button two is getting rendered click here button one to uh click uh this one button to is getting rendered so this is the whole process that what we have done we just wrap this function inside use call back and given the dependency that if the count one will only change then you render that component if count is getting changed then render the second component so that's all for this particular hook now let's move on to the next one all right everyone so let's end this particular video by creating one of the custom Hooks and this is one of the very famous interview questions also so Customs hooks are basically so whenever let's say you are working on a very large application and you have to reusable uh you have to basically reuse some of the featur so in that case you can create some of the custom hooks so most popular one is is like the one that we are going to create in this one that is use Fage then you are having use storage like you'll be basically storing your data in local or session storage then you are having use responsive and lot of others like use on out outside click uh so for example let's say you are having a model and on click of outside you want to close the model so that kind of hook that basically you can create now here what we are going to do so this will be use f chook so where will be basically passing the URL and the options as a parameter and based on that we'll be automatically getting the data now what is the advantage of creating a reusable hook or basically a custom hook so the only Advantage is your code will be much cleaner and you will be basically able to use that particular Hook from different component using different parameters so let's see how we are going to implement this one so first thing is that we are having this use Fage and uh let's do one thing so this will be our hook and this hook let's say we want to use from some different component so first we'll be creating this hook now let's give this on name as use fet now here as I already mentioned this uh will be a uh this will basically receive a URL and also you will be basically able to pass some options so let's pass some options here now here the first thing I'm going to take a state this will be my data and this will be my set data which will be US state of Mt array now here let's say I want to face the data on page load so whenever you need to face the data on page load obviously you need to take use effect hook so here we'll take our use effect and then I'm going to basically fet data now I'm not going to write this one we already have in our use effect so here you can see that this is the one so you can copy this one sorry sorry we can copy this one and then we will paste it here so here we are having F data now instead of this one I'm going to pass this URL and then we'll be having the options so this will call the API this will get the data and at the end what I'm going to do I'll just return the data obviously if you want you will be able to manage errors error or lot of other things for example let's you want to manage loading so that also you can do so you can take a loading set loading and this will be use state of false and before calling the API will do set loading as true and once we'll get the result let's we get the result here so I'm going to cut it so we make set loading as false and in this data I'm going to uh pass the result and at the end I'm going to return the loading as well as the data as simple as that now here I'll just copy this now instead of this URL sorry this hardcoded URL I'm going to pass the URL that will be receiving here and also we'll be able to pass the option that's it so now let's format and save this I'm going to export this so we'll do export default use F and this is done so this is all about the custom hook that you need to create now let's say I want to use this Hook from a different component so for example let's say I'll create another uh component here we'll give this one name as use fet test dot dot jsx so we'll create this component we'll do use f hook test and we are going to return a div sorry this will be test and here I'll return H1 this will be use f hook now what we need to do we just have to call the hook so here will be basically receiving the data and the loading this will be receiving from use fet and now you see that it will receive a URL and also the options so URL I'm going to pass this URL and options will be pass empty for now now obviously you'll be able to pass whatever you want to pass here now let's see what will happen if I now log here this data and this loading let's save it we need to use this in our app.js so I'll just use it here so do use f hook test save this awesome so now you can see that we getting false first time this uh loading state is false then we are getting this one is true then once we getting the result then again it will be false now what we can do we can simply take the products so we go here and we'll simply render here we'll take ul and we'll do if data and then data do products and then data dot products do length if this is greater than zero so we'll do data. products. map and we'll simply return here item. title what else this will be let's say no data so now let's format and save this so you're getting the data here if you want you will be able to show some kind of like if the loading is true we'll return some H1 one and we'll do loading data please wait awesome so now refresh this you're getting loading data please wait and then you are basically getting the data here so this is how you will be able to basically get the result using a custom hook so that's all for this particular video I hope that this video definitely going to help you to revise all the react hook concept and I can guarantee you that if you practice this all of these it will be very much beneficial for your interview purposes also so that's all for this particular video If you like this video give a like comment down and please subscribe to my channel I'll see you in my next video till then good luck and peace

Channel: Sangam Mukherjee

Views: 17,491

Keywords: react js hooks, react hooks, react js hooks course, react js hooks tutorial, react js hooks crash course, reactjs hooks interview questions, reactjs hooks in one video, usestate hook, usestate react, usestate hook in react js, useeffect react hooks, useeffect in react js, useeffect hook, usecontext react hooks, useref hook in react js, usereducer react hooks, usememo react hooks, usememo vs usecallback, usecallback react hooks, usefetch hook react, uselayouteffect hook

Id: 2YsQgB0IUPY

Length: 70min 40sec (4240 seconds)

Published: Mon Jan 29 2024