Introduction to React Hooks
Kumar, Alok
In this talk we are going to learn about all the react hooks and how we can implement in our Volto project. We will also see a live transformation of a Volto component from class to hooks implementation.
 Hi, welcome back everyone to track one of Plume Conference 2021. I'm here with Alouk Kumar, who is going to talk with us about integration of React Hooks into Volto when you're ready. Okay. Okay. So, hi everyone. Thanks for joining. And the title of my talk is like introduction to the React Hooks. I know that like you already know the React Hooks and you're already using it into your app, but I'm just here to give the integration with the Volto like how we are going to do that. And since we have a very large code base, we haven't migrated that to the Hooks. And due to the help of the community, maybe we can do that. And since the new features is already like the suspense, the server component and everything is coming into the React and lots of React developer too is there. So maybe we need to update from 16 to the latest. So maybe you can help us with that. So let's get started with that. So first of all, who am I? So I am Alouk Kumar. I am a front-end developer at the Kit Concept and I mainly work on to the Volto and all the Volto blogs with Steam or Sotiu. Like I almost work on them and I'm also the author of the Gatsby theme clone and I am also the contributor of Gatsby source clone. It's a plugin like which you fetch the data from the clone and give you a Gatsby site. And you can find me on LinkedIn, Twitter, GitHub with username iFleming. So first of all, like what is a hook, right? So we keep thinking or listening like, hey, it is hook, new feature and everything, right? So first of all, what is hook? The hook is a function provided by React that lets you hook into a React feature from your function component. So as you can know that like before the hook came, the only way to write your state and the logic of your component is only due to the class component. We only write dummy or dump component into the function and that's some type of problem. So React comes with a feature which is hook. It's totally new, totally new API. It does not take anything away from the classes. It's totally new. It's totally like it's your choice whether you want to use the hook or not or you keep coming with the class component. So why React hook? So why it came at the first place? So what is the problem of the class? First one is like because class in JavaScript are pretty tricky, right? Especially this keyword. And lots of us do we always get confused like, hey, why we have this bug and we found that it is due to the disk, right? Like the disk keyword. So we always have this problem. And also for writing the method in the structure, you have lots of binding right there just to use the method. So that's the first thing. The second is needs lots of boilerplate to just create a simple React component. So you wanted to just create a simple component with a simple state and what? Oh, no, we have to write lots of boilerplate just to create a simple React component. So that's the thing is it solves the third thing. Like the last class component because it is the only way we can write the logic related to our app feature. So if you try to add the state your function component before hook, you can't do that. So you have to write all the logic to the class parent component. And it's and once you have lots of feature like we have in the world to our component gets bigger and bigger and bigger and which we do not want. We want to simplify the logic which is related to a particular component to a component, not to its parent component. So that's the problem. It's soft and using hook. We can put logic where it belongs. Like we have a simple component. We can put the logic into the same function component. We do not have to go to their parents and get find it, write the logic and pass it to their function component. So that's why, like why it is why we need React hook. So let's move forward and there are some rules of the hook. The first rule of hook is like only call hooks at the top level. So what do we mean by top level? Right? It's means that do not call hooks inside the loops. Like you can't call it into the for loop. You can't call it with the condition like the ant thing or the operator thing or if the if is condition or into the nested function. You can call it you just hook into the function but not into the nested function. And the second rule is only call hooks from the React function. So what are the React function? The React function is the function which returns the JSX. So if you are returning a JSX into your function, then use the hook provided by the React. Do not use hooks for a particular just into your JavaScript function. So that's the rules of hook. So let's start with our first hook, which is the use state. So use state is a React hook that lets a component remember some information. So you can think of is that like it's providing your a memory to your function component, which is stored all the data remembers the data which is relevant to only this component. It returns two values. So you just set the function which returns the two value. The first one is the current state. The second one is the function you can use to update it. So you get the state from the use state but you also want to update it when you just click or something happens into your app. So how you can going to update that. So for that, it gives you a function to also update it. So what is the syntax for the use state? So a use state just have a function to call the function and you provide a initial state. This initial state get assigned to your state and you receive a function and this thing which you see like we are doing the added destruction. So you just are returning a added with the first with the value and the second with the function. So you can give any name in this here for the state and for the set state. So and so this is the syntax of the use state and you can update the state into the two ways like this state value can be updated in the two ways first by directly calling the system state with updated value like you just want to replace its value to one to two and you can just pass the value and this value is get updated to the state. But you also have a another approach like you can pass a function to the set state. It is called the updated function. So you can also pass a function to the set state. So how it's work. So it's work like that we have a set state same this function and you pass another function into that and this function has a previous state like it's having the argument of the previous a set and based on that it's returned a new state based on previous and this is the most I think underrated of the setting state but this is the most important one. If we have a object or add it into your set state like your initial state then I will I will tell you to use this thing for updating the state not the first one because it provides you some flexibility. So now we are going to give going to get the knowledge like what is the benefit of this update a set state. So benefit of the update a function you can access the pending state of state during the next render. So that's the most benefit like you can access the pending state. I am going to show you an example and on the code was like what's I mean. So this is the code sandbox. This is a simple app and app has a counter like you're using a user set and it's initial value is zero right and we are returning a deal with the class name app. We have a deep like where we are showing the counter and we also have a button and the button has it plus one plus two plus three value and it has three on click also listener and they are all the function like handle like increment by one increment by two and an increment by three. So let's see what they are. So we have a function call increment by one which increment the counter by one. We have a function call increment by two and we increase the counter with two and we have increment with the three with the updateer function and this is updating the counter like three times. So let's see. So let's refresh it so that we have this thing and we have the counter value zero right and plus one. So it's right, right? We have this one thing, right? Now we want to update by 12. So we click on the two and you see our values is still two, not the three, but that's the desire behavior. So what is happening wrong there? The main referring the main thing is going to be wrong is like this increment by two function capture all the state which is present into current tap structure because it's a closure. So right. So when we're calling this increment by two, what this set counter will be doing will be like it's replacing the counter. It's replacing the counter with the one value, right? And it's calling the new state like it's setting it's the new counter for that. And the same thing happening with this thing, like it's replacing with the one and the value two is set it, which we do not want. So how we can do a deal with that? So let's see what happens when we play press plus three. So we place three, it's happening like now we get the right thing and why it's happening is that like when we give a function to the previous counter, what it does is it's going to replace with the previous counter, especially the counter thing, right? The counter state. So what is going to do is like it's replaces the previous counter with the two, but now what we'll react to is like it's returns this pending state to the this function, like this previous counter has the access to the new updated state, but this thing has does not have any, this thing does not have the spending estate request provided by the react. That's why it's only calling with the two, not with the updated updated counter state. So that's why we are getting here the three and the same thing happening in like whatever it's calculated, it is stored into the pending state of the react and react will call this set counter with your passing the previous spending estate from the previous set counter thing and it's will be like four and this four is getting replaced and we get the five and that's the correct value. So maybe you can see that like how this benefit our updating the structure. So if we have like two things, depending on each other, if you use the set of data function for updating the state, it will help us and we do not have to go to the we use dispatch hook like for the same thing which is doing to the redox right. So this is the benefit of the hook and then we come to the second one. What is the second hook is huge effect hook right. So what is the huge effect hook. This is one of the most important and the tricky hook it is used for executing the side effect for our component right. You heard the the thing side effect. Let me explain you what is the side effect. So side effect is anything that affects something outside the scope of the function being executed. So once you your function component is getting executed, whatever you are modifying it, which is created before that, that's called the side effect. So it's maybe API request to our backend service, calls to our authentic essence service, error tracking calls to symmetry, changing the value of closest scope variable is also a side effect and pushing a new item onto an array that was passed in an argument is also a side effect. So how we're going to make a side effect in our component because it's an essential part of this we want to call our authentication service. We want to call our API request we are trying to send our error to our symmetry so we can improve our app. So how we can do that. So for that, react to give us this huge effect hook. So let's see the syntax of no, no, no, the first thing we like when will this hook will be called. So this week will be called after renting the component react will call this hook for us. So what will react is doing is first get it going to render all our component. The thing is going to be paint and the dumb and after that, the thing react will just call this hook for us so that we can perform the side effects related to our component. So what is the syntax of our user effect. So user effects syntax has a function and a dependency array. So your function which will be called after rendering of your component, all the variable which is used by our function. If the variable are same as the previous render, then your function will not be executed. So what is your effect huge effect in huge effect to just pass a function and whatever the variable or the function which you are using into that function will have to pass with this array, which is called dependency array. And if your variable or function chill, this function get executed. Otherwise the actual tell you like, Hey, we do not need to do that. So the example of a huge effect in huge effect, we are passing a function like it just increment the counter after every three seconds. And we are also using a clear cleaning up the timeout. So it also give you an option to clean your huge effect. So if you have any like resize event answer or any subscription event, right? So you are making a subscription to your database. And once the user gets locked out from your chat app or something, you also want to remove it from the database. So how you can do it, how you can do that is like you just write a cleaning function for that. And that things will be like get executed once your component is unmounted. So that our third hook will be huge ref hook. So huge ref returns a mutable ref object whose dot current property is initialized to the past argument initial value. So what is user F is there user F is also a function in which you provide a initial value. And this initial value will be get attached to your object, which has the property of current and current has this initial value. So the return object will persist for the full lifetime of the component. So what is the benefit of user F is that like whatever the return or the object which is returned by the huge effect, it will be persisted for the full time of the component. So whenever this component is on our desktop or on our UI, it will persist throughout that. And also, like if you want to update this object, this will not call your component rendering. So this is also a benefit of the huge ref hook. So what is the syntax of user F? The syntax of user F is like you just have a variable like ref container and you have a user F and you provide a initial value. This initial value, the user F returns an object with properties called current and current has this initial value and that object will be pointed out by this ref container. This is the syntax of user F. So let's see an example of a user F. So we made a function which has to do is like text input with focus button. So when we want to place a button, we want our input to focus. So how you can do that? So we have a JSX which contains a simply input and a button. We have ref properties and ref properties are input element. And you can see that in input element, we created a user F and we pass as a null. So initially input element current has null, but since we pass this ref to the input element, when we act the, when we act render this component, it will update the ref input element and provided the DOM value of this input and this DOM value of input get, get pointed out by this input dot element dot current, right? So after that, when we click on the button, what we'll do is like this function will getting full. And what this function is doing is it just executing the focus call button. So when the focus call button on the particular DOM event, the input will be get focus. So this is how we, you can use the user F. Now our fourth, the reactive will be use callback. So use callback is a reactive, which returns a memorized version of the callback function. It is fast. This means that the function object from the use callback will be the same between the renderers until or unless the dependency area value change. So in new function component, whenever your component renders whatever function which you define into that body, it will create it every time new. And as you know that the law of equality, the function is an object and two, our two newly object form is never equal. So the two object will be only equal if they have the instance of each other. For that, for maintaining that equality, you can use the callback. So if you are passing a function to the children and that children is getting used this function and it is keep rendering because the function is always new. So how can you avoid that? You can just use the use callback and you pass that thing, the function and its function also has a dependency area and based on that use callback return you a new function of the older instance of that. So for that, you have, you saw that like we have in the use callback react returns a memorized version of the callback function. So first of all, let's see what is the memorized version? What is the more in the computer science? So memory is a means storing the results so you can use it next time instead of calculating the same thing again and again. So in this case, whenever they use callback is called by react, it will return the same instance of function until or unless the dependency area has been changed. So let's see example and then I will explain you like what is the dependency area and what is this? So we have a use callback and we passed a function, right? And this function here has a dependency area called a or b. So whenever your component call this use callback, the same instance of this function will be render or return every time unless or until or unless you change the a, b dependency. If it's same, the react knows that like, hey, if a or b query is same, we have to return the same instance. If something is changed there, it's going to create a new function and return back to you. And our fifth hook is use memo. So use memo is a react that memorize the output of a function. So use callback just return you the memoized version of function, but use memo will what we'll do is like whatever function which you provide to the use memo is going to call it and it going to cast the result of that return function. Right. So let me first explain you and then I'll show you. So use memo is reactive that memorize the output of a function. Use memo will call the function and return and return its returns value. Then every time you call use memo again, it will first check if any dependency is changed. If not, it will return the cast return value. If it changes use memo will call the provided function again and repeat the process. So let's see the example. So let's take example like use memo. Use memo will provide a function and function calling is compute expensive value. This function may be like you have a graph and it has hundreds of nodes or you have an analyst and passing with the a b query, we are doing some complex expensive value calculation and it only depends on your a b query. And if we change this a b, then only want to compute that. And if you do not do not wrap this function into use memo, whenever your component render this function is getting called, which is, which will be a hard performance, which will hit your performance. So this use memo will help us with that. Like it, it will only call this compute expensive value. Once again, if the a b value is getting changed, if the queries remains the same, it's keep getting a keep getting you return the cast version of this compute expensive value return. So we have seen this, like five of the reactor hook, like that's some of the important one, which we need to see. Now we are going to see additional two hooks from react redux, because we use a reactor redux into our voltage. So we must know that the first one is use selector. This will give us access to a state which is present in the redux store. It takes a function argument that returned the part of the state which you want. So this is the simple hook for the, for the read us in which what we are doing like we are passing the a function and the function argument get us the state from the store. Let's see the syntax. So it's like simple, like we define a variable, we have a use selector who and use selector has a function and function has this state, like it's good getting from the store and you can access it from there. This is the whole state and we have this reducer and reduce already turn all our state. The second hook will be use dispatch. This hook returns a reference to the dispatch function. So if you know, read us, we use dispatch for dispatching our action and those action go make requests to the API, go to the reducer and change it, right? So how we are going to do it in the function component. So the function component to use this, use this hook which returns the reference to the dispatch function from the reducer store. We use it to dispatch action as needed, right? So this will be the, the syntax of the use dispatch. What we'll do first is like we'll just invoke the use dispatch first. So we have a function here and then whenever you want to dispatch the action, we just call the dispatch function with calling our actions. So update first name is the action. We are passing your parameters and calling it and we are dispatching with the dispatch function which is provided by this function. So now we are going to transform a class component to a function component into the volume. So let me show you first the code. So we are now going to change the image block into the volume. So let's first see what is the image block. So this is the clone website. And if we go to any page and you see like my page first, and if you see the image block, image block has this thing like where you can just go select your image and paste and you have this image. And if you see the image, this is the file or the component which is responsible for that edit part. And you can see that it uses the class thing, like using the class component, right? It has a static model of prototypes. It has some state. It has the it is calling component will receive props. Like whenever something changes, it's getting called. We also have suit component update. We have on upload image like in Volto, you can also upload it like you can just drop and drag it or you can just also update your upload the image into your base and you just save it and it will work. So that's for we have on upload image. We have aligned block as a team or so do you like you can align it from left, right and anywhere. We have some bunch of methods here like on submit reset. We have method for the on drop, right on key down variation menu. And we also have a render method. As you know, like in class, you have to provide this render. And then we have this bunch of JSX which returns. And then we have this compose which are composing our inject Intel connect and connect connecting our state from the store and we are dispatching this thing and this is our function. So first let's get the starter with like converting it into the function component, how it's look, right? So first of all, let's go up, right? So this is the function component. This is the class component. So we do not need this, right? So what we need, we need a const edit, right? And we have this function and this it will have a props, right? So it will have the data props and all the props which is that it, right? So we have this thing, right? In function, we do not have static prop types. So we'll just in function what we have to do is like we just go down and we have this function called edit dot prop types. And we'll just copy paste all the prop types which is present in our class, like which is it's here. So we are just refactoring it. So you can see that like I do not have to do anything. I'll take each and every code from it and I'll just do the some copy paste and remove some code and it's get converted into our function. So let's see, we have this thing. So now we have one thing is done. Now we have to remove this thing. So the first thing is the inject Intel and inject Intel, we are getting from the react Intel. Let's see. And it also has a hook called use Intel. You see, we have this hook. So before removing that, we should use this like we should first invoke it, right? So what we are doing is like after the state and just putting a cost of Intel, like use Intel thing, right? So now we can remove this also, right? We move to the prop types and we can also remove the remove the injecting tells. Now we have this connect function, right? Connect is used for getting the map state from the deducts. So we have now two like request or the content. So we are going to use the use selector and the we have this connect and we are going to use the twist to use selector and use dispatch from the react redux hooks and we are going to initiate this. We are going to get the state, the request and the connect from the store using the use selector. So right? So we have this is a function and function we have this and we are accessing the state. Like I'm just using the use selector, use selector function call a state. We have content, sub request, and we are accessing the data from the props dot block. We are doing the same with the content, like we're getting the content, sub request, prop block dot data. So now we can remove. Now we can remove this thing, right? So we are going to remove it, right? Now we have this dispatch thing, right? Like this is the props which is getting called. This is our action. So how we can get access to our action into our function component. It's from use dispatch. So first, what I'm going to do is like, I'm just going to initiate the use dispatch from the react redux. So let's go up, up, up where we have all the things. So I am invoking the use dispatch, right? Now we have this dispatch thing and we'll use the action wherever we want, right? So now we can also remove this line. So after removing this line, we do not have to do anything. We remove the connect. We'll remove the compose because now we are not composing anything. So you can see like we are deleted a bunch of code from our component, right? So this will be our edit. Okay. So now we have done that, right? Now we have everything. So I will go into do the component will receive props after like first, we do not need suit component update into the function component because it will be handled by our, it will be handled by our huge effect. Now we are going to convert this on upload image matter to our function component. It is very easy. Like how we can do that. So for this, I am just put a constant like on uploading and now we converted it just we need like a state called uploading. So we'll create a set a state use a state of uploading. So let me do that. So I just put it here. So now we have a user state of uploading to be false and here into our set a state will remove this thing. Keep remember, we'll remove all the this and we'll just use set uploading. And what is that? It's true, right? So we'll use set uploading to true, right? So this way you can, we can remove the set uploading and where we are using this create content action. As you can see that we have this volt of create content action. So how we are going to replace that is like we'll use the dispatch. We'll use the dispatch and in dispatch we are going to call you our function, which is create content and in create content, we are just going to pass our this params, which I needed, right? And we are going to remove this thing. Right? I always mess this up. So let me grab it. So let's see. So this is the dispatch. So this is the dispatch, right? So we are just dispatching our create content. We are doing all the things, right? We remove it. This thing, we do not have anything, right? This is the way you can just refactor it. Like we just deleted the two or four lines of code and we just converted and what did they method into a function? We are not using a line block. So anywhere. So we'll just remove it. And after that, you can see that like we can do the same thing like everywhere. Like you can change it from the on to our change URL, right? On submit URL. And it's easy. Like and just remove this thing. This thing, you can remove the this dot props and the URL, like it's there. I'm running after time. So I'm just going to source like just I'm going to copy and the first whole thing. And I'll just going to explain you so that I just need another two minutes. So this is the whole component. So we are just going to I'm just going to show you like this is the edit and we are just going to uploading the state. We are just using the dispatch and everything. And we also have a huge effect. And the huge effect has this thing like where we are changing our block data URL and the alt everything. And we also have an on upload function, which I just saw you like changing and thus dispatching the create content. We have all the same thing like on change URL on submit URL, this submit URL, this submit URL. We are just replaced with the cost and use the set state thing. We have changed the on drop and everything is there. And we did the on key down variation menu. And we use as the also the drop zone, react hooks get react and get input. And I just updated it to the update it to the hooks and everything is same. Like I haven't changed anything much more. And if I show you you like our new reacting like from the books. And if you see like I am running out of time. So if you see like after converting, if I select, it will also work. Right. So we haven't done anything. We haven't picked anything. And you can do this thing by just converting it to the react hooks. And it does not take much more time. So yeah, that's it from my side. And yeah, thank you. Thank you for joining. Thank you. Look, that was great. We are so happy that you were able to present. I posted the face to face jitsie in the track one. And we encourage everyone to go and join that and continue the conversation there.
 Hi, welcome back everyone to track one of Plume Conference 2021.  I'm here with Alouk Kumar, who is going to talk with us about integration of React Hooks  into Volto when you're ready.  Okay.  Okay.  So, hi everyone.  Thanks for joining.  And the title of my talk is like introduction to the React Hooks.  I know that like you already know the React Hooks and you're already using it into your  app, but I'm just here to give the integration with the Volto like how we are going to do  that.  And since we have a very large code base, we haven't migrated that to the Hooks.  And due to the help of the community, maybe we can do that.  And since the new features is already like the suspense, the server component and everything  is coming into the React and lots of React developer too is there.  So maybe we need to update from 16 to the latest.  So maybe you can help us with that.  So let's get started with that.  So first of all, who am I?  So I am Alouk Kumar.  I am a front-end developer at the Kit Concept and I mainly work on to the Volto and all  the Volto blogs with Steam or Sotiu.  Like I almost work on them and I'm also the author of the Gatsby theme clone and I am  also the contributor of Gatsby source clone.  It's a plugin like which you fetch the data from the clone and give you a Gatsby site.  And you can find me on LinkedIn, Twitter, GitHub with username iFleming.  So first of all, like what is a hook, right?  So we keep thinking or listening like, hey, it is hook, new feature and everything, right?  So first of all, what is hook?  The hook is a function provided by React that lets you hook into a React feature from your  function component.  So as you can know that like before the hook came, the only way to write your state and  the logic of your component is only due to the class component.  We only write dummy or dump component into the function and that's some type of problem.  So React comes with a feature which is hook.  It's totally new, totally new API.  It does not take anything away from the classes.  It's totally new.  It's totally like it's your choice whether you want to use the hook or not or you keep  coming with the class component.  So why React hook?  So why it came at the first place?  So what is the problem of the class?  First one is like because class in JavaScript are pretty tricky, right?  Especially this keyword.  And lots of us do we always get confused like, hey, why we have this bug and we found that  it is due to the disk, right?  Like the disk keyword.  So we always have this problem.  And also for writing the method in the structure, you have lots of binding right there just  to use the method.  So that's the first thing.  The second is needs lots of boilerplate to just create a simple React component.  So you wanted to just create a simple component with a simple state and what?  Oh, no, we have to write lots of boilerplate just to create a simple React component.  So that's the thing is it solves the third thing.  Like the last class component because it is the only way we can write the logic related  to our app feature.  So if you try to add the state your function component before hook, you can't do that.  So you have to write all the logic to the class parent component.  And it's and once you have lots of feature like we have in the world to our component  gets bigger and bigger and bigger and which we do not want.  We want to simplify the logic which is related to a particular component to a component,  not to its parent component.  So that's the problem.  It's soft and using hook.  We can put logic where it belongs.  Like we have a simple component.  We can put the logic into the same function component.  We do not have to go to their parents and get find it, write the logic and pass it to  their function component.  So that's why, like why it is why we need React hook.  So let's move forward and there are some rules of the hook.  The first rule of hook is like only call hooks at the top level.  So what do we mean by top level?  Right?  It's means that do not call hooks inside the loops.  Like you can't call it into the for loop.  You can't call it with the condition like the ant thing or the operator thing or if  the if is condition or into the nested function.  You can call it you just hook into the function but not into the nested function.  And the second rule is only call hooks from the React function.  So what are the React function?  The React function is the function which returns the JSX.  So if you are returning a JSX into your function, then use the hook provided by the React.  Do not use hooks for a particular just into your JavaScript function.  So that's the rules of hook.  So let's start with our first hook, which is the use state.  So use state is a React hook that lets a component remember some information.  So you can think of is that like it's providing your a memory to your function component, which  is stored all the data remembers the data which is relevant to only this component.  It returns two values.  So you just set the function which returns the two value.  The first one is the current state.  The second one is the function you can use to update it.  So you get the state from the use state but you also want to update it when you just click  or something happens into your app.  So how you can going to update that.  So for that, it gives you a function to also update it.  So what is the syntax for the use state?  So a use state just have a function to call the function and you provide a initial state.  This initial state get assigned to your state and you receive a function and this thing  which you see like we are doing the added destruction.  So you just are returning a added with the first with the value and the second with the  function.  So you can give any name in this here for the state and for the set state.  So and so this is the syntax of the use state and you can update the state into the two  ways like this state value can be updated in the two ways first by directly calling the  system state with updated value like you just want to replace its value to one to two and  you can just pass the value and this value is get updated to the state.  But you also have a another approach like you can pass a function to the set state.  It is called the updated function.  So you can also pass a function to the set state.  So how it's work.  So it's work like that we have a set state same this function and you pass another function  into that and this function has a previous state like it's having the argument of the  previous a set and based on that it's returned a new state based on previous and this is  the most I think underrated of the setting state but this is the most important one.  If we have a object or add it into your set state like your initial state then I will  I will tell you to use this thing for updating the state not the first one because it provides  you some flexibility.  So now we are going to give going to get the knowledge like what is the benefit of this  update a set state.  So benefit of the update a function you can access the pending state of state during the  next render.  So that's the most benefit like you can access the pending state.  I am going to show you an example and on the code was like what's I mean.  So this is the code sandbox.  This is a simple app and app has a counter like you're using a user set and it's initial  value is zero right and we are returning a deal with the class name app.  We have a deep like where we are showing the counter and we also have a button and the  button has it plus one plus two plus three value and it has three on click also listener  and they are all the function like handle like increment by one increment by two and  an increment by three.  So let's see what they are.  So we have a function call increment by one which increment the counter by one.  We have a function call increment by two and we increase the counter with two and we have  increment with the three with the updateer function and this is updating the counter  like three times. So let's see. So let's refresh it so that we have this thing and we have the  counter value zero right and plus one. So it's right, right? We have this one thing, right?  Now we want to update by 12. So we click on the two and you see our values is still two,  not the three, but that's the desire behavior. So what is happening wrong there? The main  referring the main thing is going to be wrong is like this increment by two function capture all  the state which is present into current tap structure because it's a closure. So right. So  when we're calling this increment by two, what this set counter will be doing will be like it's  replacing the counter. It's replacing the counter with the one value, right? And it's calling the new  state like it's setting it's the new counter for that. And the same thing happening with this  thing, like it's replacing with the one and the value two is set it, which we do not want. So how  we can do a deal with that? So let's see what happens when we play press plus three. So we  place three, it's happening like now we get the right thing and why it's happening is that  like when we give a function to the previous counter, what it does is it's going to replace  with the previous counter, especially the counter thing, right? The counter state. So what is going  to do is like it's replaces the previous counter with the two, but now what we'll react to is like  it's returns this pending state to the this function, like this previous counter has the access to the  new updated state, but this thing has does not have any, this thing does not have the spending  estate request provided by the react. That's why it's only calling with the two, not with the updated  updated counter state. So that's why we are getting here the three and the same thing happening  in like whatever it's calculated, it is stored into the pending state of the react and react will  call this set counter with your passing the previous spending estate from the previous set  counter thing and it's will be like four and this four is getting replaced and we get the five and  that's the correct value. So maybe you can see that like how this benefit our updating the structure.  So if we have like two things, depending on each other, if you use the set of data function  for updating the state, it will help us and we do not have to go to the we use dispatch hook like for  the same thing which is doing to the redox right. So this is the benefit of the hook and then we  come to the second one. What is the second hook is huge effect hook right. So what is the huge effect  hook. This is one of the most important and the tricky hook it is used for executing the side  effect for our component right. You heard the the thing side effect. Let me explain you what is the  side effect. So side effect is anything that affects something outside the scope of the function  being executed. So once you your function component is getting executed, whatever you are modifying  it, which is created before that, that's called the side effect. So it's maybe API request to our  backend service, calls to our authentic essence service, error tracking calls to symmetry, changing  the value of closest scope variable is also a side effect and pushing a new item onto an array  that was passed in an argument is also a side effect. So how we're going to make a side effect  in our component because it's an essential part of this we want to call our authentication service.  We want to call our API request we are trying to send our error to our symmetry so we can improve  our app. So how we can do that. So for that, react to give us this huge effect hook. So let's see  the syntax of no, no, no, the first thing we like when will this hook will be called. So this week  will be called after renting the component react will call this hook for us. So what will  react is doing is first get it going to render all our component. The thing is going to be  paint and the dumb and after that, the thing react will just call this hook for us so that  we can perform the side effects related to our component. So what is the syntax of our user effect.  So user effects syntax has a function and a dependency array. So your function which will  be called after rendering of your component, all the variable which is used by our function.  If the variable are same as the previous render, then your function will not be executed. So what  is your effect huge effect in huge effect to just pass a function and whatever the variable  or the function which you are using into that function will have to pass with this array,  which is called dependency array. And if your variable or function chill, this function get  executed. Otherwise the actual tell you like, Hey, we do not need to do that.  So the example of a huge effect in huge effect, we are passing a function like it just  increment the counter after every three seconds. And we are also using a clear cleaning up the  timeout. So it also give you an option to clean your huge effect. So if you have any like resize  event answer or any subscription event, right? So you are making a subscription to your database.  And once the user gets locked out from your chat app or something, you also want to remove it  from the database. So how you can do it, how you can do that is like you just write a cleaning  function for that. And that things will be like get executed once your component is unmounted.  So that our third hook will be huge ref hook. So huge ref returns a mutable ref object whose  dot current property is initialized to the past argument initial value. So what is user F is  there user F is also a function in which you provide a initial value. And this initial value  will be get attached to your object, which has the property of current and current has this  initial value. So the return object will persist for the full lifetime of the component. So what  is the benefit of user F is that like whatever the return or the object which is returned by the  huge effect, it will be persisted for the full time of the component. So whenever this component is  on our desktop or on our UI, it will persist throughout that. And also, like if you want to  update this object, this will not call your component rendering. So this is also a benefit of the  huge ref hook. So what is the syntax of user F? The syntax of user F is like you just have a  variable like ref container and you have a user F and you provide a initial value. This initial  value, the user F returns an object with properties called current and current has this  initial value and that object will be pointed out by this ref container. This is the syntax of user F.  So let's see an example of a user F. So we made a function which has to do is like text input  with focus button. So when we want to place a button, we want our input to focus. So how you  can do that? So we have a JSX which contains a simply input and a button. We have ref properties  and ref properties are input element. And you can see that in input element, we created a user F  and we pass as a null. So initially input element current has null, but since we pass this ref to  the input element, when we act the, when we act render this component, it will update the ref input  element and provided the DOM value of this input and this DOM value of input get, get  pointed out by this input dot element dot current, right? So after that, when we click on the button,  what we'll do is like this function will getting full. And what this function is doing is it just  executing the focus call button. So when the focus call button on the particular DOM event,  the input will be get focus. So this is how we, you can use the user F.  Now our fourth, the reactive will be use callback. So use callback is a reactive,  which returns a memorized version of the callback function. It is fast. This means that the function  object from the use callback will be the same between the renderers until or unless the dependency  area value change. So in new function component, whenever your component renders whatever function  which you define into that body, it will create it every time new. And as you know that the law  of equality, the function is an object and two, our two newly object form is never equal.  So the two object will be only equal if they have the instance of each other.  For that, for maintaining that equality, you can use the callback. So if you are passing a function  to the children and that children is getting used this function and it is keep rendering because  the function is always new. So how can you avoid that? You can just use the use callback and you  pass that thing, the function and its function also has a dependency area and based on that  use callback return you a new function of the older instance of that. So for that, you have,  you saw that like we have in the use callback react returns a memorized version of the callback  function. So first of all, let's see what is the memorized version? What is the more in the  computer science? So memory is a means storing the results so you can use it next time instead  of calculating the same thing again and again. So in this case, whenever they use callback is  called by react, it will return the same instance of function until or unless the dependency area  has been changed. So let's see example and then I will explain you like what is the dependency  area and what is this? So we have a use callback and we passed a function, right? And this function  here has a dependency area called a or b. So whenever your component call this use callback,  the same instance of this function will be render or return every time unless or until or unless  you change the a, b dependency. If it's same, the react knows that like, hey, if a or b query is  same, we have to return the same instance. If something is changed there, it's going to create  a new function and return back to you. And our fifth hook is use memo. So use memo is a react  that memorize the output of a function. So use callback just return you the memoized version  of function, but use memo will what we'll do is like whatever function which you provide to the  use memo is going to call it and it going to cast the result of that return function.  Right. So let me first explain you and then I'll show you. So use memo is reactive that memorize  the output of a function. Use memo will call the function and return and return its returns value.  Then every time you call use memo again, it will first check if any dependency is changed. If not,  it will return the cast return value. If it changes use memo will call the provided function again  and repeat the process. So let's see the example. So let's take example like use memo. Use memo will  provide a function and function calling is compute expensive value. This function may be like you  have a graph and it has hundreds of nodes or you have an analyst and passing with the a b query,  we are doing some complex expensive value calculation and it only depends on your a b query.  And if we change this a b, then only want to compute that. And if you do not do not wrap this  function into use memo, whenever your component render this function is getting called, which  is, which will be a hard performance, which will hit your performance. So this use memo will help  us with that. Like it, it will only call this compute expensive value. Once again, if the a b  value is getting changed, if the queries remains the same, it's keep getting a keep getting you  return the cast version of this compute expensive value return. So we have seen this, like five of  the reactor hook, like that's some of the important one, which we need to see. Now we are going to  see additional two hooks from react redux, because we use a reactor redux into our voltage. So we  must know that the first one is use selector. This will give us access to a state which is  present in the redux store. It takes a function argument that returned the part of the state  which you want. So this is the simple hook for the, for the read us in which what we are doing  like we are passing the a function and the function argument get us the state from the store.  Let's see the syntax. So it's like simple, like we define a variable, we have a use selector  who and use selector has a function and function has this state, like it's good getting from the  store and you can access it from there. This is the whole state and we have this reducer and reduce  already turn all our state. The second hook will be use dispatch. This hook returns a reference  to the dispatch function. So if you know, read us, we use dispatch for dispatching our action and  those action go make requests to the API, go to the reducer and change it, right? So how we are  going to do it in the function component. So the function component to use this, use this hook  which returns the reference to the dispatch function from the reducer store. We use it to  dispatch action as needed, right? So this will be the, the syntax of the use dispatch. What we'll do  first is like we'll just invoke the use dispatch first. So we have a function here and then whenever  you want to dispatch the action, we just call the dispatch function with calling our actions. So  update first name is the action. We are passing your parameters and calling it and we are dispatching  with the dispatch function which is provided by this function. So now we are going to transform  a class component to a function component into the volume. So let me show you first the code.  So we are now going to change the image block into the volume. So let's first see what is the image  block. So this is the clone website. And if we go to any page and you see like my page first,  and if you see the image block, image block has this thing like where you can just go select your  image and paste and you have this image. And if you see the image, this is the file or the component  which is responsible for that edit part. And you can see that it uses the class thing, like  using the class component, right? It has a static model of prototypes. It has some state.  It has the it is calling component will receive props. Like whenever something changes,  it's getting called. We also have suit component update. We have on upload image like in  Volto, you can also upload it like you can just drop and drag it or you can just also update your  upload the image into your base and you just save it and it will work. So that's for we have on  upload image. We have aligned block as a team or so do you like you can align it from left,  right and anywhere. We have some bunch of methods here like on submit reset. We have method for  the on drop, right on key down variation menu. And we also have a render method. As you know,  like in class, you have to provide this render. And then we have this bunch of JSX which returns.  And then we have this compose which are composing our inject Intel connect and connect  connecting our state from the store and we are dispatching this thing and this is our function.  So first let's get the starter with like converting it into the function component,  how it's look, right? So first of all, let's go up, right? So this is the function component.  This is the class component. So we do not need this, right? So what we need, we need a const  edit, right? And we have this function and this it will have a props, right? So it will have the  data props and all the props which is that it, right? So we have this thing, right? In function,  we do not have static prop types. So we'll just in function what we have to do is like we just go  down and we have this function called edit dot prop types. And we'll just copy paste all the prop  types which is present in our class, like which is it's here. So we are just refactoring it.  So you can see that like I do not have to do anything. I'll take each and every code from it  and I'll just do the some copy paste and remove some code and it's get converted into our function.  So let's see, we have this thing. So now we have one thing is done. Now we have to remove this  thing. So the first thing is the inject Intel and inject Intel, we are getting from the react Intel.  Let's see. And it also has a hook called use Intel. You see, we have this hook. So before  removing that, we should use this like we should first invoke it, right? So what we are doing is  like after the state and just putting a cost of Intel, like use Intel thing, right? So now we can  remove this also, right? We move to the prop types and we can also remove the  remove the injecting tells. Now we have this connect function, right? Connect is used for  getting the map state from the deducts. So we have now two like request or the content. So we are  going to use the use selector and the we have this connect and we are going to use the twist to  use selector and use dispatch from the react redux hooks and we are going to initiate this. We  are going to get the state, the request and the connect from the store using the use selector.  So right? So we have this is a function and function we have this and we are accessing the  state. Like I'm just using the use selector, use selector function call a state. We have  content, sub request, and we are accessing the data from the props dot block. We are doing the  same with the content, like we're getting the content, sub request, prop block dot data. So now  we can remove. Now we can remove this thing, right? So we are going to remove it, right? Now we have  this dispatch thing, right? Like this is the props which is getting called. This is our action. So how  we can get access to our action into our function component. It's from use dispatch. So first, what  I'm going to do is like, I'm just going to initiate the use dispatch from the react redux. So let's  go up, up, up where we have all the things. So I am invoking the use dispatch, right? Now we have  this dispatch thing and we'll use the action wherever we want, right? So now we can also remove  this line. So after removing this line, we do not have to do anything. We remove the connect.  We'll remove the compose because now we are not composing anything. So you can see like we are  deleted a bunch of code from our component, right? So this will be our edit. Okay. So now we have  done that, right? Now we have everything. So I will go into do the component will receive props  after like first, we do not need suit component update into the function component because it  will be handled by our, it will be handled by our huge effect. Now we are going to convert this on  upload image matter to our function component. It is very easy. Like how we can do that. So for this,  I am just put a constant like on uploading and now we converted it just we need like a state called  uploading. So we'll create a set a state use a state of uploading. So let me do that. So I just  put it here. So now we have a user state of uploading to be false and here into our  set a state will remove this thing. Keep remember, we'll remove all the this and we'll just use set  uploading. And what is that? It's true, right? So we'll use set uploading  to true, right? So this way you can, we can remove the set uploading and where we are using this  create content action. As you can see that we have this volt of create content action. So how  we are going to replace that is like we'll use the dispatch. We'll use the dispatch and in dispatch  we are going to call you our function, which is create content and in create content, we are just  going to pass our this params, which I needed, right? And we are going to remove this thing.  Right? I always mess this up. So let me grab it.  So let's see. So this is the dispatch.  So this is the dispatch, right? So we are just dispatching our create content. We are doing  all the things, right? We remove it. This thing, we do not have anything, right? This is the way  you can just refactor it. Like we just deleted the two or four lines of code and we just converted  and what did they method into a function? We are not using a line block. So anywhere. So we'll just  remove it. And after that, you can see that like we can do the same thing like everywhere. Like you  can change it from the on to our change URL, right? On submit URL. And it's easy. Like and just remove  this thing. This thing, you can remove the this dot props and the URL, like it's there. I'm running  after time. So I'm just going to source like just I'm going to copy and the first whole thing. And  I'll just going to explain you so that I just need another two minutes. So this is the whole component.  So we are just going to I'm just going to show you like this is the edit and we are just going to  uploading the state. We are just using the dispatch and everything. And we also have a huge effect.  And the huge effect has this thing like where we are changing our block data URL and the alt  everything. And we also have an on upload function, which I just saw you like changing and thus dispatching  the create content. We have all the same thing like on change URL on submit URL, this submit URL,  this submit URL. We are just replaced with the cost and use the set state thing. We have changed  the on drop and everything is there. And we did the on key down variation menu. And we use as the  also the drop zone, react hooks get react and get input. And I just updated it to the update it to  the hooks and everything is same. Like I haven't changed anything much more. And if I show you  you like our new reacting like from the books. And if you see like I am running out of time.  So if you see like after converting, if I select, it will also work. Right. So we haven't done anything.  We haven't picked anything. And you can do this thing by just converting it to the react hooks.  And it does not take much more time. So yeah, that's it from my side. And yeah, thank you. Thank you  for joining. Thank you. Look, that was great. We are so happy that you were able to present.  I posted the face to face jitsie in the track one. And we encourage everyone to go and join that  and continue the conversation there.
Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_0_8795.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_8796_11315.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_11316_11675.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_11676_24707.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_24708_29447.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_29448_34619.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_34620_34775.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_34776_35147.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_35148_35255.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_35256_35627.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_35628_36419.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_36420_37871.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_37872_38867.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_38868_39095.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_39096_40427.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_40428_41963.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_41964_44351.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_44352_44915.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_44916_45935.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_45936_47099.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_47100_47795.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_47796_47891.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_47892_48323.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_48324_48743.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_48744_48911.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_48912_49343.png Introduction_to_React_Hooks_-_Alok_Kumar__aX2d3CzTJU_49344_49606.png
Hi, welcome back everyone to track one of Plume Conference 2021. I'm here with Alouk Kumar, who is going to talk with us about integration of React Hooks into Volto when you're ready. Okay. Okay. So, hi everyone. Thanks for joining. And the title of my talk is like introduction to the React Hooks. I know that like you already know the React Hooks and you're already using it into your app, but I'm just here to give the integration with the Volto like how we are going to do that. And since we have a very large code base, we haven't migrated that to the Hooks. And due to the help of the community, maybe we can do that. And since the new features is already like the suspense, the server component and everything is coming into the React and lots of React developer too is there. So maybe we need to update from 16 to the latest. So maybe you can help us with that. So let's get started with that. So first of all, who am I? So I am Alouk Kumar. I am a front-end developer at the Kit Concept and I mainly work on to the Volto and all the Volto blogs with Steam or Sotiu. Like I almost work on them and I'm also the author of the Gatsby theme clone and I am also the contributor of Gatsby source clone. It's a plugin like which you fetch the data from the clone and give you a Gatsby site. And you can find me on LinkedIn, Twitter, GitHub with username iFleming. So first of all, like what is a hook, right? So we keep thinking or listening like, hey, it is hook, new feature and everything, right? So first of all, what is hook? The hook is a function provided by React that lets you hook into a React feature from your function component. So as you can know that like before the hook came, the only way to write your state and the logic of your component is only due to the class component. We only write dummy or dump component into the function and that's some type of problem. So React comes with a feature which is hook. It's totally new, totally new API. It does not take anything away from the classes. It's totally new. It's totally like it's your choice whether you want to use the hook or not or you keep coming with the class component. So why React hook? So why it came at the first place? So what is the problem of the class? First one is like because class in JavaScript are pretty tricky, right? Especially this keyword. And lots of us do we always get confused like, hey, why we have this bug and we found that it is due to the disk, right? Like the disk keyword. So we always have this problem. And also for writing the method in the structure, you have lots of binding right there just to use the method. So that's the first thing. The second is needs lots of boilerplate to just create a simple React component. So you wanted to just create a simple component with a simple state and what? Oh, no, we have to write lots of boilerplate just to create a simple React component. So that's the thing is it solves the third thing. Like the last class component because it is the only way we can write the logic related to our app feature. So if you try to add the state your function component before hook, you can't do that. So you have to write all the logic to the class parent component. And it's and once you have lots of feature like we have in the world to our component gets bigger and bigger and bigger and which we do not want. We want to simplify the logic which is related to a particular component to a component, not to its parent component. So that's the problem. It's soft and using hook. We can put logic where it belongs. Like we have a simple component. We can put the logic into the same function component. We do not have to go to their parents and get find it, write the logic and pass it to their function component. So that's why, like why it is why we need React hook. So let's move forward and there are some rules of the hook. The first rule of hook is like only call hooks at the top level. So what do we mean by top level? Right? It's means that do not call hooks inside the loops. Like you can't call it into the for loop. You can't call it with the condition like the ant thing or the operator thing or if the if is condition or into the nested function. You can call it you just hook into the function but not into the nested function. And the second rule is only call hooks from the React function. So what are the React function? The React function is the function which returns the JSX. So if you are returning a JSX into your function, then use the hook provided by the React. Do not use hooks for a particular just into your JavaScript function. So that's the rules of hook. So let's start with our first hook, which is the use state. So use state is a React hook that lets a component remember some information. So you can think of is that like it's providing your a memory to your function component, which is stored all the data remembers the data which is relevant to only this component. It returns two values. So you just set the function which returns the two value. The first one is the current state. The second one is the function you can use to update it. So you get the state from the use state but you also want to update it when you just click or something happens into your app. So how you can going to update that. So for that, it gives you a function to also update it. So what is the syntax for the use state? So a use state just have a function to call the function and you provide a initial state. This initial state get assigned to your state and you receive a function and this thing which you see like we are doing the added destruction. So you just are returning a added with the first with the value and the second with the function. So you can give any name in this here for the state and for the set state. So and so this is the syntax of the use state and you can update the state into the two ways like this state value can be updated in the two ways first by directly calling the system state with updated value like you just want to replace its value to one to two and you can just pass the value and this value is get updated to the state. But you also have a another approach like you can pass a function to the set state. It is called the updated function. So you can also pass a function to the set state. So how it's work. So it's work like that we have a set state same this function and you pass another function into that and this function has a previous state like it's having the argument of the previous a set and based on that it's returned a new state based on previous and this is the most I think underrated of the setting state but this is the most important one. If we have a object or add it into your set state like your initial state then I will I will tell you to use this thing for updating the state not the first one because it provides you some flexibility. So now we are going to give going to get the knowledge like what is the benefit of this update a set state. So benefit of the update a function you can access the pending state of state during the next render. So that's the most benefit like you can access the pending state. I am going to show you an example and on the code was like what's I mean. So this is the code sandbox. This is a simple app and app has a counter like you're using a user set and it's initial value is zero right and we are returning a deal with the class name app. We have a deep like where we are showing the counter and we also have a button and the button has it plus one plus two plus three value and it has three on click also listener and they are all the function like handle like increment by one increment by two and an increment by three. So let's see what they are. So we have a function call increment by one which increment the counter by one. We have a function call increment by two and we increase the counter with two and we have increment with the three with the updateer function and this is updating the counter like three times. So let's see. So let's refresh it so that we have this thing and we have the counter value zero right and plus one. So it's right, right? We have this one thing, right? Now we want to update by 12. So we click on the two and you see our values is still two, not the three, but that's the desire behavior. So what is happening wrong there? The main referring the main thing is going to be wrong is like this increment by two function capture all the state which is present into current tap structure because it's a closure. So right. So when we're calling this increment by two, what this set counter will be doing will be like it's replacing the counter. It's replacing the counter with the one value, right? And it's calling the new state like it's setting it's the new counter for that. And the same thing happening with this thing, like it's replacing with the one and the value two is set it, which we do not want. So how we can do a deal with that? So let's see what happens when we play press plus three. So we place three, it's happening like now we get the right thing and why it's happening is that like when we give a function to the previous counter, what it does is it's going to replace with the previous counter, especially the counter thing, right? The counter state. So what is going to do is like it's replaces the previous counter with the two, but now what we'll react to is like it's returns this pending state to the this function, like this previous counter has the access to the new updated state, but this thing has does not have any, this thing does not have the spending estate request provided by the react. That's why it's only calling with the two, not with the updated updated counter state. So that's why we are getting here the three and the same thing happening in like whatever it's calculated, it is stored into the pending state of the react and react will call this set counter with your passing the previous spending estate from the previous set counter thing and it's will be like four and this four is getting replaced and we get the five and that's the correct value. So maybe you can see that like how this benefit our updating the structure. So if we have like two things, depending on each other, if you use the set of data function for updating the state, it will help us and we do not have to go to the we use dispatch hook like for the same thing which is doing to the redox right. So this is the benefit of the hook and then we come to the second one. What is the second hook is huge effect hook right. So what is the huge effect hook. This is one of the most important and the tricky hook it is used for executing the side effect for our component right. You heard the the thing side effect. Let me explain you what is the side effect. So side effect is anything that affects something outside the scope of the function being executed. So once you your function component is getting executed, whatever you are modifying it, which is created before that, that's called the side effect. So it's maybe API request to our backend service, calls to our authentic essence service, error tracking calls to symmetry, changing the value of closest scope variable is also a side effect and pushing a new item onto an array that was passed in an argument is also a side effect. So how we're going to make a side effect in our component because it's an essential part of this we want to call our authentication service. We want to call our API request we are trying to send our error to our symmetry so we can improve our app. So how we can do that. So for that, react to give us this huge effect hook. So let's see the syntax of no, no, no, the first thing we like when will this hook will be called. So this week will be called after renting the component react will call this hook for us. So what will react is doing is first get it going to render all our component. The thing is going to be paint and the dumb and after that, the thing react will just call this hook for us so that we can perform the side effects related to our component. So what is the syntax of our user effect. So user effects syntax has a function and a dependency array. So your function which will be called after rendering of your component, all the variable which is used by our function. If the variable are same as the previous render, then your function will not be executed. So what is your effect huge effect in huge effect to just pass a function and whatever the variable or the function which you are using into that function will have to pass with this array, which is called dependency array. And if your variable or function chill, this function get executed. Otherwise the actual tell you like, Hey, we do not need to do that. So the example of a huge effect in huge effect, we are passing a function like it just increment the counter after every three seconds. And we are also using a clear cleaning up the timeout. So it also give you an option to clean your huge effect. So if you have any like resize event answer or any subscription event, right? So you are making a subscription to your database. And once the user gets locked out from your chat app or something, you also want to remove it from the database. So how you can do it, how you can do that is like you just write a cleaning function for that. And that things will be like get executed once your component is unmounted. So that our third hook will be huge ref hook. So huge ref returns a mutable ref object whose dot current property is initialized to the past argument initial value. So what is user F is there user F is also a function in which you provide a initial value. And this initial value will be get attached to your object, which has the property of current and current has this initial value. So the return object will persist for the full lifetime of the component. So what is the benefit of user F is that like whatever the return or the object which is returned by the huge effect, it will be persisted for the full time of the component. So whenever this component is on our desktop or on our UI, it will persist throughout that. And also, like if you want to update this object, this will not call your component rendering. So this is also a benefit of the huge ref hook. So what is the syntax of user F? The syntax of user F is like you just have a variable like ref container and you have a user F and you provide a initial value. This initial value, the user F returns an object with properties called current and current has this initial value and that object will be pointed out by this ref container. This is the syntax of user F. So let's see an example of a user F. So we made a function which has to do is like text input with focus button. So when we want to place a button, we want our input to focus. So how you can do that? So we have a JSX which contains a simply input and a button. We have ref properties and ref properties are input element. And you can see that in input element, we created a user F and we pass as a null. So initially input element current has null, but since we pass this ref to the input element, when we act the, when we act render this component, it will update the ref input element and provided the DOM value of this input and this DOM value of input get, get pointed out by this input dot element dot current, right? So after that, when we click on the button, what we'll do is like this function will getting full. And what this function is doing is it just executing the focus call button. So when the focus call button on the particular DOM event, the input will be get focus. So this is how we, you can use the user F. Now our fourth, the reactive will be use callback. So use callback is a reactive, which returns a memorized version of the callback function. It is fast. This means that the function object from the use callback will be the same between the renderers until or unless the dependency area value change. So in new function component, whenever your component renders whatever function which you define into that body, it will create it every time new. And as you know that the law of equality, the function is an object and two, our two newly object form is never equal. So the two object will be only equal if they have the instance of each other. For that, for maintaining that equality, you can use the callback. So if you are passing a function to the children and that children is getting used this function and it is keep rendering because the function is always new. So how can you avoid that? You can just use the use callback and you pass that thing, the function and its function also has a dependency area and based on that use callback return you a new function of the older instance of that. So for that, you have, you saw that like we have in the use callback react returns a memorized version of the callback function. So first of all, let's see what is the memorized version? What is the more in the computer science? So memory is a means storing the results so you can use it next time instead of calculating the same thing again and again. So in this case, whenever they use callback is called by react, it will return the same instance of function until or unless the dependency area has been changed. So let's see example and then I will explain you like what is the dependency area and what is this? So we have a use callback and we passed a function, right? And this function here has a dependency area called a or b. So whenever your component call this use callback, the same instance of this function will be render or return every time unless or until or unless you change the a, b dependency. If it's same, the react knows that like, hey, if a or b query is same, we have to return the same instance. If something is changed there, it's going to create a new function and return back to you. And our fifth hook is use memo. So use memo is a react that memorize the output of a function. So use callback just return you the memoized version of function, but use memo will what we'll do is like whatever function which you provide to the use memo is going to call it and it going to cast the result of that return function. Right. So let me first explain you and then I'll show you. So use memo is reactive that memorize the output of a function. Use memo will call the function and return and return its returns value. Then every time you call use memo again, it will first check if any dependency is changed. If not, it will return the cast return value. If it changes use memo will call the provided function again and repeat the process. So let's see the example. So let's take example like use memo. Use memo will provide a function and function calling is compute expensive value. This function may be like you have a graph and it has hundreds of nodes or you have an analyst and passing with the a b query, we are doing some complex expensive value calculation and it only depends on your a b query. And if we change this a b, then only want to compute that. And if you do not do not wrap this function into use memo, whenever your component render this function is getting called, which is, which will be a hard performance, which will hit your performance. So this use memo will help us with that. Like it, it will only call this compute expensive value. Once again, if the a b value is getting changed, if the queries remains the same, it's keep getting a keep getting you return the cast version of this compute expensive value return. So we have seen this, like five of the reactor hook, like that's some of the important one, which we need to see. Now we are going to see additional two hooks from react redux, because we use a reactor redux into our voltage. So we must know that the first one is use selector. This will give us access to a state which is present in the redux store. It takes a function argument that returned the part of the state which you want. So this is the simple hook for the, for the read us in which what we are doing like we are passing the a function and the function argument get us the state from the store. Let's see the syntax. So it's like simple, like we define a variable, we have a use selector who and use selector has a function and function has this state, like it's good getting from the store and you can access it from there. This is the whole state and we have this reducer and reduce already turn all our state. The second hook will be use dispatch. This hook returns a reference to the dispatch function. So if you know, read us, we use dispatch for dispatching our action and those action go make requests to the API, go to the reducer and change it, right? So how we are going to do it in the function component. So the function component to use this, use this hook which returns the reference to the dispatch function from the reducer store. We use it to dispatch action as needed, right? So this will be the, the syntax of the use dispatch. What we'll do first is like we'll just invoke the use dispatch first. So we have a function here and then whenever you want to dispatch the action, we just call the dispatch function with calling our actions. So update first name is the action. We are passing your parameters and calling it and we are dispatching with the dispatch function which is provided by this function. So now we are going to transform a class component to a function component into the volume. So let me show you first the code. So we are now going to change the image block into the volume. So let's first see what is the image block. So this is the clone website. And if we go to any page and you see like my page first, and if you see the image block, image block has this thing like where you can just go select your image and paste and you have this image. And if you see the image, this is the file or the component which is responsible for that edit part. And you can see that it uses the class thing, like using the class component, right? It has a static model of prototypes. It has some state. It has the it is calling component will receive props. Like whenever something changes, it's getting called. We also have suit component update. We have on upload image like in Volto, you can also upload it like you can just drop and drag it or you can just also update your upload the image into your base and you just save it and it will work. So that's for we have on upload image. We have aligned block as a team or so do you like you can align it from left, right and anywhere. We have some bunch of methods here like on submit reset. We have method for the on drop, right on key down variation menu. And we also have a render method. As you know, like in class, you have to provide this render. And then we have this bunch of JSX which returns. And then we have this compose which are composing our inject Intel connect and connect connecting our state from the store and we are dispatching this thing and this is our function. So first let's get the starter with like converting it into the function component, how it's look, right? So first of all, let's go up, right? So this is the function component. This is the class component. So we do not need this, right? So what we need, we need a const edit, right? And we have this function and this it will have a props, right? So it will have the data props and all the props which is that it, right? So we have this thing, right? In function, we do not have static prop types. So we'll just in function what we have to do is like we just go down and we have this function called edit dot prop types. And we'll just copy paste all the prop types which is present in our class, like which is it's here. So we are just refactoring it. So you can see that like I do not have to do anything. I'll take each and every code from it and I'll just do the some copy paste and remove some code and it's get converted into our function. So let's see, we have this thing. So now we have one thing is done. Now we have to remove this thing. So the first thing is the inject Intel and inject Intel, we are getting from the react Intel. Let's see. And it also has a hook called use Intel. You see, we have this hook. So before removing that, we should use this like we should first invoke it, right? So what we are doing is like after the state and just putting a cost of Intel, like use Intel thing, right? So now we can remove this also, right? We move to the prop types and we can also remove the remove the injecting tells. Now we have this connect function, right? Connect is used for getting the map state from the deducts. So we have now two like request or the content. So we are going to use the use selector and the we have this connect and we are going to use the twist to use selector and use dispatch from the react redux hooks and we are going to initiate this. We are going to get the state, the request and the connect from the store using the use selector. So right? So we have this is a function and function we have this and we are accessing the state. Like I'm just using the use selector, use selector function call a state. We have content, sub request, and we are accessing the data from the props dot block. We are doing the same with the content, like we're getting the content, sub request, prop block dot data. So now we can remove. Now we can remove this thing, right? So we are going to remove it, right? Now we have this dispatch thing, right? Like this is the props which is getting called. This is our action. So how we can get access to our action into our function component. It's from use dispatch. So first, what I'm going to do is like, I'm just going to initiate the use dispatch from the react redux. So let's go up, up, up where we have all the things. So I am invoking the use dispatch, right? Now we have this dispatch thing and we'll use the action wherever we want, right? So now we can also remove this line. So after removing this line, we do not have to do anything. We remove the connect. We'll remove the compose because now we are not composing anything. So you can see like we are deleted a bunch of code from our component, right? So this will be our edit. Okay. So now we have done that, right? Now we have everything. So I will go into do the component will receive props after like first, we do not need suit component update into the function component because it will be handled by our, it will be handled by our huge effect. Now we are going to convert this on upload image matter to our function component. It is very easy. Like how we can do that. So for this, I am just put a constant like on uploading and now we converted it just we need like a state called uploading. So we'll create a set a state use a state of uploading. So let me do that. So I just put it here. So now we have a user state of uploading to be false and here into our set a state will remove this thing. Keep remember, we'll remove all the this and we'll just use set uploading. And what is that? It's true, right? So we'll use set uploading to true, right? So this way you can, we can remove the set uploading and where we are using this create content action. As you can see that we have this volt of create content action. So how we are going to replace that is like we'll use the dispatch. We'll use the dispatch and in dispatch we are going to call you our function, which is create content and in create content, we are just going to pass our this params, which I needed, right? And we are going to remove this thing. Right? I always mess this up. So let me grab it. So let's see. So this is the dispatch. So this is the dispatch, right? So we are just dispatching our create content. We are doing all the things, right? We remove it. This thing, we do not have anything, right? This is the way you can just refactor it. Like we just deleted the two or four lines of code and we just converted and what did they method into a function? We are not using a line block. So anywhere. So we'll just remove it. And after that, you can see that like we can do the same thing like everywhere. Like you can change it from the on to our change URL, right? On submit URL. And it's easy. Like and just remove this thing. This thing, you can remove the this dot props and the URL, like it's there. I'm running after time. So I'm just going to source like just I'm going to copy and the first whole thing. And I'll just going to explain you so that I just need another two minutes. So this is the whole component. So we are just going to I'm just going to show you like this is the edit and we are just going to uploading the state. We are just using the dispatch and everything. And we also have a huge effect. And the huge effect has this thing like where we are changing our block data URL and the alt everything. And we also have an on upload function, which I just saw you like changing and thus dispatching the create content. We have all the same thing like on change URL on submit URL, this submit URL, this submit URL. We are just replaced with the cost and use the set state thing. We have changed the on drop and everything is there. And we did the on key down variation menu. And we use as the also the drop zone, react hooks get react and get input. And I just updated it to the update it to the hooks and everything is same. Like I haven't changed anything much more. And if I show you you like our new reacting like from the books. And if you see like I am running out of time. So if you see like after converting, if I select, it will also work. Right. So we haven't done anything. We haven't picked anything. And you can do this thing by just converting it to the react hooks. And it does not take much more time. So yeah, that's it from my side. And yeah, thank you. Thank you for joining. Thank you. Look, that was great. We are so happy that you were able to present. I posted the face to face jitsie in the track one. And we encourage everyone to go and join that and continue the conversation there.
going to make a side effect in our component rendering of your component, all the variable from the react Intel. Let's see. And it also has redux hooks and we are going to initiate this. We action. So how we can get access to our action