Hi, welcome back everyone to track one of Plone Conference 2021. I'm here with Alok 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, so first of all, who am I? So I am Alok Kumar. I am a front end developer at the KitConcept and I mainly work on, onto the Volto and all the Volto blocks which Timo showed you.

Like I almost work on them and I'm also the author of the Gatsby Theme Plone. And I am also the contributor of Gatsby Source Plone. It's a plugin like which you fetch the data from the Plone and give you a Gatsby site. And you can find me on LinkedIn, Twitter, GitHub with username iFlaming.

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 in before the hook games, 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 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 do you keep coming with the 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, we always get confused like, hey, why do we have this bug? And we found that it is due to the this, right? Like the this keyword. So you always, we have this problem. And also for writing the method in constructor, 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 it solves. The third thing, like the last class component, because it is the only way we can write the logic related to our feature. So if you try to add the state function component before hook, you can't do that. So you have to write all the logic to the class parent component. And once you have lots of features like we have in the Volto, 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 solves. And using hook, we can put logic where it belongs. Like we have a simple component, we can put its logic into the same function component.

We do not have to go to their parents and 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 you mean by top level, right? It 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 and thing or the operator thing or if the if else condition or into the nested function. You can call the, 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? React function are the function which returns the JSX. So if you are returning a JSX into your function, then use the hooks provided by React. Do not use hooks for a particular just 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 memory to your function component, which store all the data,

remembers the data, which is relevant to only these components. It returns two values. So use state is a 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 user state, but you also want to update it when user click or something happens into your app.

So how are you going to update that? So for that, it gives you a function to also update it. So what is the syntax for the user state? So a user state just have a function, you call the function and you provide an 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 destructing. So user state returning an array with the first with the value and the second with the function. So we are just restructuring. 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 user 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 set state with the 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 that state.

But you also have 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 it pass another function into that. And this function has a previous state like it's having the argument of the

previous state 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 an object or add it into your set state like your initial state, then 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 updater set state. So benefit of the updater 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 on the code base like what I mean. So this is the code sandbox. This is a simple app. An app has a counter like using a user state and its initial value is zero. Right. And we are returning a div with the class name app. We have a div like where we are showing the counter and we also have a button

and the button has a plus one, plus two, a 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 increment by three. So let's see what they are. So we have a function called increment by one, which increment the counter by one. We have a function called increment by two and we increase the counter with the two.

And we have increment with the three with the updater function. And this is the 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 twice.

So we click on the two and you see our value is still two, not the three. But that's the desired behavior. So what is happening wrong there? The main thing is going to be wrong is like this increment by two function capture all the state which is present into current data structure because it's a closure. So right. So when we are calling this increment by two,

what the 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 a 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, which we do not want. So how we can deal with that.

So let's see what happens when you press plus three. So we press 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 it's going to do is like it replaces the previous counter with the

two. But now what we'll react to do is like it 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 pending state request provided by the React. That's why it's only calling with the two, not with the updated counter state. So that's why we are getting here the three and the same thing happening. Whatever is calculated, it is stored into the pending state of the React and React will call this set counter with passing the previous

pending state from the previous set counter thing. And it 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

updater function for updating the state, it will help us. And we do not have to go to the use dispatch hook like for the same thing which is doing to the readouts. Right. So this is the benefit of the hook. And then we come to the second rule. What is the second rule is use effect hook.

Right. So what is the use effect hook? This is one of the most important and tricky. It is used for executing the side effect for our component. Right. You heard the thing, side effect. Let me explain to 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 authentication service, error tracking calls to symmetry, changing the value of closure scope variable is also a side effect and pushing a new item onto an added

that was passed in an argument is also a side effect. So how we are 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 use effect hook. So let's see the syntax of 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 first going to render all our components.

The thing is going to be paint and the DOM. And after that, the thing react will just call this for us so that we can perform the side effects related to our component. So what is the syntax of our use effect? So use effect 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? Use effect in use effect will just pass a function and whatever the variable or the function which you are using into that function will have to pass this array, which is called dependency array.

And if your variable or function chill this function get executed, otherwise react will tell you like, hey, we do not need to do that. So the example of a use effect in use effect, we are passing a function like just increment the counter after every three seconds. And we are also using it to clean up the timeout.

So it also gives you an option to clean your use effect. So if you have any like resize event or any subscription event event, right. So you are making a subscription to your database. And once the user gets lockout from your chat app or something, you also want to remove it from the database.

So how 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 our third hook will be use ref hook. So use ref returns a mutable ref object

whose dot current property is initialized to the past argument initial value. So what is use ref is that use ref is also a function in which you provide 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 life of the component. So what is the benefit of use ref is that like whatever the return or the object which is returned by the use 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 use ref. Hook. So what is the syntax of use ref? The syntax of use ref is like you just have a variable like ref container

and you have a use ref and you provide an initial value. This initial value, the use ref 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 use ref. So let's see example of a use ref.

So we made a function which has which has to do is like text input with focus button. So when we want to press 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 a ref properties and ref properties are input element. And you can see that in input element,

we created a use ref and it passes a null. So initially input element dot current has null. But since we passed this ref to be input element, when we when we add 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 get input. 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 you can use the use ref. Now our fourth React hook will be use callback. So use callback is a React hook 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 re-renders until or unless the dependency value will 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 newly object form is never equal.

So the two object will be only equal if they are 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 use 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 array. And based on that use callback return 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 memorization in the computer science? So memorization 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 the use callback is called by React,

it will return the same instance of function until or unless the dependency array has been changed. So let's see example and then I'll explain you like what is the dependency array and what is this? So we have a use callback and we passed a function right and this function has a dependency array called A or B.

So whenever your component call this use callback, the same instance of this function will be rendered or returned every time, unless or until or unless you change the AB 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 is going to create a new function and return back to you. And our fifth hook is useMemo. So useMemo is a React hook that memorize the output of a function. So use callback just return you the memoized version of function. But useMemo will, what we'll do is like whatever function

which you provide to the useMemo is going to call it and it's going to cast the result of that return function. Right. So let me first explain you and then I'll show you. So useMemo is React hook that memorize the output of a function. UseMemo will call the function and return and return its returns value.

Then every time you call useMemo again, it will first check if any dependency is changed. If not, it will return the cast return value. If it changes, useMemo will call the provided function again and repeat the process. So let's see the example. So let's take example like useMemo.

UseMemo 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 node or you have an analyst and passing with the AB query. We are doing some complex, expensive value calculation. And it only depends on your AB query.

And if we change this AB, then only you want to compute that. And if you do not do not wrap this function into useMemo, whenever your component render this function is getting called, which is which will be a hard performance, which will hit your performance. So this useMemo will help us with that.

Like it will only call this compute expensive value. Once again, if the AB value is getting changed, if the query remains the same, it keeps 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 React Redux into our Volto. So we must know that the first one is useSelector. This will give us access to a state which is present in the Redux store.

It takes a function argument that return the part of the state which you want. So this is the simple hook for the for the Redux in which what we are doing, we are passing the 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 useSelector hook and useSelector has a function and function has this state like it's getting from the store and you can access it from there. This is the whole state and we have this reducer and reducer will return all our state. The second hook will be useDispatch. This hook returns a reference to the dispatch function.

So if you know Redux, we use dispatch for dispatching our action and those actions go make requests to the API, go to the reducer and change it. Right. So how are we going to do in the function component? So the function component, we use this hook which returns the reference to the dispatch function from the Redux store.

We use it to dispatch action as needed. Right. So this will be the syntax of the useDispatch. What we'll do first is like we'll just invoke the useDispatch first. So we have a function here and then whenever we want to dispatch the action, we just call the dispatch function with calling our action.

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

image block into the voltage. So let's first see what is the image block. So this is the Plone 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 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 suite 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 Timo showed 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 various 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 concern. So first, let's get started 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 company. This is the class component. So we do not need this right. So what we need, we need a cost 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 right. So we have this thing right in function. We do not have a 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 I will 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 will take each and every quote from it.

And I'll just do that some copy paste and remove some code and it gets converted into the 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 inject Intel. Now we have this connect function, right? Connected use 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. Select that and the we have this connect and we are going to use the twist use selector and use dispatch from the react deducts 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, you select a function called state.

We have content sub request and we are accessing the data from the props block. We are doing the same with the content, like we're getting the content sub request prop block 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 process 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 deducts.

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. OK, 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 method to our function component, it is very easy, like how we can do that.

So for this, I am just put a const like on uploading. And now we converted it. Just we need like a state called uploading. So we'll create a set state, use state of uploading. So let me do that. So I just put it here.

So now we have a use state of uploading to be false. And here into our set state, we'll 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 Volto 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 then 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 this thing, we do not have anything, right? This is the way you can just be factory like we just deleted two or four lines of code and we just convert converted the method into a function.

We are not using a line block. So anyway, so we'll just remove it. And after that, you can see that we can do the same thing like everywhere, like you can change it from the on 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 out of time. So I'm just going to source like just I'm going to copy and paste the whole thing. And I'll just explain you so that I just need another two minutes. So this is the whole company.

So we are just going to I'm just going to show you like this is the idea. 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 everything. And we also have on upload function,

which I just saw you like changing and just dispatching the create content. We have all the same thing like on change URL, on submit URL, resubmit URL. We have just replaced with the const 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 the also the drop jump react hooks, get react and get input.

And I just updated it to the updated to the hooks and everything is same. Like I haven't done anything much more. And if I show you like our new reacting like from the hooks. 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 played anything. And you can do this thing by just converting it to the reactors. 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 Jitsi in the track one, and we encourage everyone to go and join that and continue the conversation there.