#44: React Hook Rules! Every Dev Must Know to Master React JS

Hello what's up guy, my name is Vinod Badur Thapa and today in this video we will see hooks rule in our react application. Yes guy, whenever we use these hooks in react, they have some rules which you need to follow. Which is necessary for you to understand to master your react concept. Okay then you directly guys come to our animation in PPT I will tell you one by one and at the end I will also show you practically what is its actual meaning and believe me in this video. You must watch till the end because once you understand what are the rules of hooks then your life is going to be very easy. First of all, hooks are what let you use different react features from your component. Obviously guys first let us use guy class component. You know but since the advent of hooks, we no longer need a class component. We can tackle the state management directly with the help of hooks. So this is also very important. It starts with use prefix, so what does it mean? This means that all the hooks you have in your React application and how to know that they are hooks, then a simple convention is that whatever the name of the hooks is, it always starts with use and is used as a prefix. Like use state use effect use reducer if you remember this is our application not here this one this is our application okay and here if you see then what is this use state right here what am I using my hook use If I am doing this, then this is your use keyword. Okay, so this is what it means, then hooks can only be used at the top level, it is very important at the top level of your component, no matter what, always use it at the top level. You may be a little confused as to what top level means. This means that do not call hooks inside loops. Conditions on nested functions. This is it. Apart from this, anywhere you define it, it will be called your top level by default. No problem but if you define hooks inside loops or inside conditions or inside nested functions then it will not be called your top level and then there you are going to get an error. Let me tell you what it means. It means that suppose this. Is our previous video you know short circuit evaluation let's say if and not is if is not our user if it is true then I would like to create a new hooks and that is by texting is not sorry count how many users are there and set here Count equal to use state is fine and currently I am giving zero so here you can see already I am getting even here also an error is coming even though I had defined the already use state. What error is coming? Let's see the reaction. Hook use state is called conditionally, that's the end of the matter. Look, this is the use state hook, it is being called how conditionally and react hooks must be called in the exact same order in every component. So you are understanding that anytime you call condition in this way. Yes, many of you may have some confusion and that is, can I not play with hooks at all in this way that if the value of user is correct then I will count plus and then Guys, this is a particular code, you can do it, but in our case there was nothing like this, otherwise you understand, if you add the above code which I told you a little while ago and if the user is present, then you In the set count, the value of the count is plus and you could have done it, so if you do this, then guys, you have no problem, just within the condition, you can make the hooks, these are the particular hooks which we are defining, the hooks which we are creating. You cannot do this part, now you can obviously use these updated functions. Okay, what do many people think? Maybe I can't use it even now under the condition, there is no such updated function, so you can use it obviously. We have done it ourselves once, remember the decrement operator inside the increment, so I will tell you in tomorrow's video when we will see the use state, but this particular piece of code, you can never create it inside the condition, this is what it means, then this is what These are hooks. You can create them in empty react function component or custom hook only. You cannot call it inside regular JavaScript function nor can you use it inside class component. See what it means. I have kept it very well here for you people, look at the part containing 'And That's Source', a little while ago I told you not to use it inside the condition, you can use it directly outside, and the second thing is that look here. This is the code where there is a function in which you have let me do it live, let's say here, I am calling a function here, by doing get get data, I have called a function, okay, now I have defined this function here. I am const get data and in this way now suggest it back I am copying here instead of paste and count I do get data I am ok and here in this way so now this particular code is also not you You can do that if you look at this part, keep one thing in mind, it may seem like a component to you but it is not a component, it is your normal JavaScript function, the first letter of the component is always your capital, I mean Y capital. This is what happens, I have shortened it, look at this, I am getting an error saying that short circuit is declared but its value is never used, it is directly telling what is declared but is not being used, but this is your short circuit. It is okay, so this is a normal JavaScript function also, you use your use state, not the empty use state, even if your use is a reducer hook, it is okay, although its syntax is a little different, your dispatch state remains something like this, but that too You cannot do anything neither inside the regular function nor inside the condition. So it is up to you to make sure that all these things are absolutely wrong. You cannot do this. Then you can also create your own custom hooks by creating functions starting with Use this is a shores that react can identification so inside you can create your own custom hooks we will do further don't worry but you can see very clearly here for example we have this use fetch use form are you understanding and then NCO Hooks are called in the same order if you remember. Earlier here, when I created a hook, okay, so I hope you knew where the I copy it back, paste it here, delete it and delete it here, an error will show you here, see, react hooks must be called in exact same order in every component, meaning hooks also have their own component, I mean order. Do you understand? Yes, I don't know how many of you have ever paid attention to this or not, but guys, this is the reality that hooks also have their own orders which they have to follow. Okay, like components, if I go here, short circuit. This is your end here we have a hooks and or right now look here we have two hooks, one of which is numbered one, the other one is number two, they are numbered hook number one, hook number two, hook number three, so that is the order. No, we can never break it, it is very important, just like the hook also has its own keys, similarly the hook also has this order which we have to follow, so ya so I think it's the same or guy so today for this video so much Hi and I hope you have come to know about this and make sure that you follow these rules very well, understand them well and your life will be very set. So guys, now finally from tomorrow we are going to start our React Hooks. So guys are you excited because I'm super excited okay so guys I would like to tell you if you liked the video or if you have any other rules that I might have forgotten to mention then let me know in the comment section. Do check out the playlist. If you like the video then like it and share it with your friends. And if you have not yet subscribed to my awesome channel Thapa Technical, please do. I will meet you in the next video till then guys. Thank you so much take care [Music]