#74: useCallback Hook in React in Hindi

Hello Whats Up Guy, first of all, this is an example. If you understand this example, then you will get the complete idea that what is this use call back hook, when and why should we use it. I have uploaded the complete video on Read Memo and Then Use Memo Hook. If you have not checked it out yet then definitely check it out. Today it is its third brother Use Call Back Hook. I will explain it to you, watch it carefully. For now, you will get a glimpse of it. It may seem like a simple counter application but what I mean is that the code I wrote to create it, you may not have seen that code in my life, I will show you in a little while, but what is happening, I would like to tell you one thing, here on the right. On the hand side you can see very clearly, it is also showing to you that is a rendering button increment rendering button decrement is ok so at the moment I click on increment then it started again and I can also see the console with increment inside. And then when I click on decrement, I will not see that increment inside because it was inside the increment function but yes, I did not write anything inside the decrement so it was not visible but still every time I get this rendering button increment. Why is the rendering button decrement coming? Why is this coming to me? And now I will tell you the reason behind it and why here use call back hook. Like is going to be a life saver for us. Okay, look carefully at this code. First of all, I would like to show you how I wrote, this is our div, this is our component, inside which there is an h1, the value of the count is getting updated in this manner and here, this button that you are seeing is not a normal HTML tag. At the moment, what HTML will you say here, it is not a tag, it is a component, okay, and I have created this component on the same page, within the same component, and if I tell you the fold structure, if you are following me. So I show you this every time so that you do not have to wander, inside the memo we have basically these two parts, this was our react memo function, in yesterday's video we saw use callback, today's video is our use callback, one and every. I am capitalizing the first letter of one so that you all know that this is a component and not an end, you cannot even write small. Okay, so our same this is the use call back component, that is where I have named this component. What is the key? Now what is happening here? This seems a little big to you. For the time being, this is the particular part, you forget it. Okay, you forget it. Now look at you, now this is this simple thing. This is just a small component. The button component has become so small now. Okay, now what is happening in this button component, look at one thing carefully, I am passing a props on click, there is no event, this is a prop of yours which The value that I am passing inside is also not a normal value that is your function so inside the child component I am passing a prop inside which I am passing a function as a value and inside that I have added this normal Wrote some values, now whenever there is a component in React, it is okay, you write anything inside it, tell me how you will get it, obviously we can get it with the help of this children keyword and as for props, here you can directly. Right props and you can directly do the restructuring. Datchi will click so run this function. Now this one which is on click is basically this one which is on click. Guys if I tell you this one is on click and what is this one which is on click. Your button will be incremented or decremented in the function and children basically or the first time your second button will be incremented. I told you that you might not have seen this code but it is important to understand that now everything is correct here. What is the problem here pay and use call back what do we need here now look carefully again one more time I hope code so now you know this time and yes look how pale it looks what I have done here I had done this, I had used tailon css on this button, that too conditional tailon css where if the value of children is increment then make the background color green else leave it red. Now I will do this so it is done, okay look carefully whenever I click. What I am doing is rendering button increment rendering button decrement, do you know what is this component of mine or friend, every time I click this button, then why are you calling it brother, why are you calling it again and again- Why are you disturbing this? Do you understand what I am trying to say? Some airs were very special and some were not so here, why are we recreating this again and again, so in this way, if any component is What do we use to save you from re-rendering? Tell me the perfect memo: React Memo. So I am putting it inside the memo so that as long as this component does not change its own actual props, you can render it. Don't do it, okay, I hope now you have come to know after watching my last four videos, you have got the complete idea, you will not speak in life, when to use memo, when to use memo hook, and today after watching this video, you will know the use. When to use call back hook, what am I doing? This is basically a link problem, there is no error, so I am disabling it for the time being, okay now it is perfect, look carefully, I have written it, it means ma'am. That now even this useless Atlas will not be re-rendered. I have written this particular re- rendering button children. If there is an increment here and there, then we come to know about the decrement. I am removing it and refreshing once. Oh my God, what has happened? Oh my God, look, you are watching brother, I used a memo, why am I getting this even after that? This is messed up. In yesterday's video, I told you that even after writing a memo, you still need to use the memo. So that you can optimize the values, you can optimize the extensive calculations, you can optimize the object, but when does the use call back hook come in handy when you have to optimize the function? Understand the meaning of use callback and use memo. Kind of similar use memo. Your values ​​have to be optimized. Basically, there is a function. To optimize the values ​​inside it, you use memo. If you want to optimize the complete function, then use call back. Now in our case, we will have to optimize that function only because writing the memo. Even after this, my child component is getting rendered, see here, I refresh it, go inside profiler deps, I am running it, finish it, I stop it, see what happens carefully, see, see use. Call back, you know what is ours, this is my actual component and why is it getting rendered because one hook is getting changed, obviously yours is getting changed, isn't it the count hook, so it will get rendered but brother, you have seen it. Why was it rendered? Look, what was that button component? I forgot the name for a while. Why was it rendered because prop changed? Click here. You can see what it means when I told this in yesterday's video. You pass the object as a props and then even if you write a memo, what it is checking is whether the props of this particular component has changed or not. If not, then it does not allow this component to be rendered, but still it renders. How did the memo allow this to happen? Because whether it is an object in yesterday's video or functions in today's video, then guys, whenever you pass the function as a props in this way, then again its reference should change. The work of the And the Moment Memo is that it is checking the reference and will directly check the props. It is checking the reference to see whether the request that came before and the request that came now, are the props basically the same or the reference between the two. No, the reference is found different, it does not mean that something has changed, that is why it is running, so now here I have to tell you that no, this is a function, this is a constant, this is a function, is there any scenario with some change in it? Normally, there is a function, now optimize it, so now I have to optimize this function and if I optimize it, then the reference to it will become static and the memo will never be affected. Well yes friend, this is the same function. If you are understanding the old function, then the syntax of use call back hook is also the same, then use call back is your call back syntax and here we have a dependency array, it is okay, this way the name or use call back is okay, so now look carefully at this. There is a particular part, I will go inside it and this will be the complete code of yours and I guess or so, I write this part here, now this is what I am commenting on at the moment, whatever value would have come, I will write it in this way. I will paste it, okay, so simple, I did not do anything, first inside the increment function, I had written, now inside the function of call back, I have written a dependency array, okay, first of all, I will decrement. I will click on rendering button decrement oh my god increment function is not recreated I am refreshing again now if I remove this see first time obviously it will work fine but now if I click on this increment insight rendering button decrement see What is happening here, the advantage is that the moment manage function has been optimized, now this is our component, now it has saved it, it is simple because of recreating again and again, now look at this particular one. The moment was not called, I have optimized it, it has not called it now, simple right, now this is the same thing, which is A, I will copy it, I will do equal to this, right now, I just have to do minus here, I will comment on it. Okay and I'll make this also decrement inside here, now look carefully now no matter what happens increment decrement increment decrement increment decrement increment decrement I know guys, now looking at you here you must be feeling like come on and whatever function was ours. We saved the child component from being re-rendered, but what was the role of use call back hook in it? Right like, obviously like role, it had a strong role, that is why we memoized the function and optimized it. Now let's not say memoize. I am saying optimized due to which now this particular component is not getting re- rendered again and again but still whenever I am clicking, I am getting increment inside decrement inside, so what happened with the function? I am telling you that this is very important, listen carefully, then what has happened is that now you must be feeling that even after writing use call back, the function is still the same, I was getting the value but it is not so, what is happening if you have used Callback hook is not written. If you understand, then every time our component is being rendered, be it your increment function or decrement function, a new instance of it would be created in our memory and when that new instance was being created. So, we were getting its reference, basically, by taking this code of ours, it was showing it to us on our basic UI. You understand, every time a new instance, every time this object was being recreated again. So, even after writing this our memo. It did n't work, he said it clearly, yes, this function is a different function every time, whereas the function was the same every time, right but at the moment we wrote the use call back hook, first of all, what did it do to our increment and decrement function? Memoise This means that every time these were being recreated, now he has saved them and what he does now in starting them is that he creates an instance, the instance will be created for the first time, once that instance is created, recreate it from the data. They are not already ready as an instance, now whenever you click on it, the data of that instance is there, basically we are playing with that instance simply, now guys, you understand this much, for now we are playing with that instance. Here they are playing, they are being recreated again and again, they are being stored at different places, we are taking its reference and it is not happening with them, I hope you have understood right, obviously our work is done, now even if you do not write it, no one will. There was no problem but yes this is a way you can use call back hook and with memo function also. By combining both, now your work has become so easy. See how easy it has become. Let's do one thing here too. Let's not go. Over Here Over Here Profiler Okay, I am cutting this, or I go here, I go again here, I started it and or this is it, now you can see very clearly that this is the end, look, use back. The hook must have run once and after that this component of mine did not render. We saved the world. Right yesterday I saved you from rendering with the help of use memo hook. Today I showed you the help of use callback hook. How can you save it and the second thing is that we have also saved the recreation part of it, so guys, how did you like today's video, it was very awesome, neither, I hope guys read memo, use memo and then use. You must have got a good idea about the callback hook. Use callback hook to optimize your function. Use memo to optimize your values. Use memo to avoid unnecessary re-render of your child component. If there is no prop change then it is ok and or this is it this was your use call back function guys if there is any doubt then let me know in the comment section and please like the video if you like it then share it with your friends. Next target is 7 lakh subscribers and end please subscribe, a red color bell icon will appear on the right side, hit it and click so that you do n't miss daily awesome videos so guys meet me till tomorrow's video. Thank You So Much Take Care [Music]