How to Convert Component to React Hooks

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.4 instructor rating • 21 courses • 38,057 students

Learn more from the full course

Serverless React with AWS Amplify - The Complete Guide

Build full-stack React apps faster than ever, which scale to millions of users, and run entirely in the cloud!

08:26:11 of on-demand video • Updated December 2019

  • Learn how to create stunning end-to-end serverless React apps
  • See how to rapidly build React apps; faster than you've ever built React web apps before!
  • Use and implement all of the major AWS services that are made available with Amplify
  • Discover how to make infinitely scalable React projects which run entirely in the cloud
English [Auto] We built our entire note taker app within a class component. However with the introduction of React hooks we can simplify our code make it a bit more concise and write it within a function component react hooks give us all the features of class components all the states and lifecycle methods and make them available in components that were previously used just for displaying markup. So this is a big change to react and I'd like to show you now how to implement that implement react hooks within the context of our app. So first will head to abduct us and we'll copy all of the code within app digest and create a new file within source called app hooks. J.S. so this is where we'll write our function component and all of our hooks will rewrite our class component to be a function component that uses hooks and within index Ijaz will swap out the component that we're using now we'll use the app component from dot slash app hooks so we can save both of these files and now we'll take a look at our Pakistan Jason file in order to use react hooks we need to have at least react sixteen point seven and react Dom sixteen point seven. So I'm currently using sixteen point six and therefore I need to upgrade my version again if you have react sixteen point seven or higher. You don't need to do this but if your version is like mine then we'll head to our terminal we'll end our start script with control C and we'll install react at next and react Dom at next. It's important that you upgrade both the version of react and react on for react hooks to work properly. And once we see that we've successfully increased the version of both of these packages we'll run our start script again and once we see that our apps started up and is working successfully let's head to our app folks file and our first step is to switch over our class component to a function component so all we need to do is remove the component import up at the top change class to concert app and we'll make this an arrow function. You could also make this a function declaration and since we have a function component now we have no concept of state at least within a state object. We have no lifecycle hooks so we'll comment that out as well. Both component did mount and component will unbound will change the functions that we previously had as methods on our class two functions within our function components. So we'll add const or lat or however we want to declare them so once we switch to each one of our methods to functions or remove the render function or remove the destruction values from state since we don't have a state object anymore we'll keep the return and we will remove one of the closing curly braces. So now we've switched over to a function but we don't have any state and we're not doing the things that we need to do when our component mounts and when our component on mounts. So the first step is creating some state and instead of creating a state object like we would in a class based component we need to import a hook from react called use state so within function components we use state and in order to use state we call the use state function up at the very top of our component. Now let's map our state values that we previously had in an object to use state in the first one is I.D.. So how do we declare what its initial value is. Well we can just copy it and remember it was an empty string and put it within the executed used state function. So we pass it to use state and we get back from you state a couple of things both of which are variables that we need to declare with constant let or VaR was a concept and then these two things will come to us in a set of brackets. And here we're just creating the IED piece of state and the first value that we get from calling you state is our state value and we can call it whatever we want we want to call it I.D. like we had it before and then the second value we get is a function which sets this piece of state and this piece of state alone. So we don't have as before and a class component a set state method and always the setter is prefixed with the word set. So this will be set I.D. Now let's do the same for the remaining 2 properties and values for note we'll declare you state pass and its initial value of an empty string and get back the value that we want to create the value that we want to manage rather called note and we'll have it setter as set note and then for our notes array that'll be an empty array to begin with and we'll have notes and set notes. So as you can see we have a lot of individual pieces of state all created with the you state function. Keep in mind it is possible to put an object within you state and for example to create state very similarly to how we had it within a class component where Ida is a property and has a value and initial value and the same for note and notes but that comes with its own caveats which we won't cover here. So we've created our state and we can remove the commented out state object. How do we replicate the function of component did mounts and component will on Mount. Well we have one hook that enables us to replicate or model the functionality of all of the methods that we previously had as lifecycle hooks and that is use effect and use effect is for performing what's known as side effects in our ReACT components. So if we want to interact with the outside world in some way say reach out to an API as we are here. This is what's known as a side effect so use effect is going to be necessary in this case and use effect is written a bit differently than a normal lifecycle hook. Instead of writing it like a method like so use effect takes a function called the effect function and in the effect function is where we execute all of our side effects. So from component amount we're just gonna copy everything within it and paste it within our affect function like so. So this will function as our component did mount however the effect function is going to be run and therefore everything in it is going to be run whenever there's an update to any one of our pieces of state. So it's also going to function like components update. Well we don't want this. We only want all of this code being run when our component mounts and at no other time to to change its behavior we'll go down to the very bottom and after the effect function a lot of karma and another argument so to speak to make sure all this code just runs on component mounts and on mount as we'll see we'll give it an empty array. So with the second argument we can determine exactly when the effect function runs. Now what about component on Mount with all the listeners that we've set up in use effect. How do we unsubscribe from them. Well fortunately at the very end of the effect function we have the ability to return a function. So if we return a function declaration or just a aero function like I have here we can grip all of the stuff that we want to clean up in this cleanup function. And this is perfect for our case where we want to unsubscribe from a bunch of listeners. So when we're done working with the component when we've done mounted we can make sure we're removing everything that's unnecessary within our returned cleanup function. Now we can remove both component did mount and component will on Mount all of that commented out code. Now let's address the issue of this. We don't have this anymore since we don't have a class component. There's no this when it comes to working with function components particularly with functions that we've created as aero functions. So what do we do in order to call a function now. Well we can just remove this. So get notes is going to be called like so just remove the this keyword and for putting something on the class like we did with this dot create note listener. We can just turn this into a declaration a variable declaration or a concert to create. Note listener and heading down const delete. Note listener const update note listener. And in order to unsubscribe from each of those we can remove the reference to this within our cleanup function for each of them will return to the use effect hook. But for now let's continue down in our code and we'll modify what's written in our functions. For example where we're calling set state we need to change this to our individual setters that we created with each of our state values using use state so set state first heading to get notes. Sad state here is just going to be set. Note Since we're just updating the notes piece of state and in order to call set notes we don't need this of course and we don't need to update notes within an object like we previously did for a set state. We just need to pass on the value that we want to update the notes array with and that'll be a result of data that listeners stored items and for handles change note we're updating the note value so this will be set. Note and it'll be set to event at Target type value for has existing note we can remove the destruction values and the great thing about using hooks particularly the use state hooks is that we don't need to reference this dot state or a state object we can just reference the pieces of state as individual variables. And since all of our functions are within the scope of those variables we can use them just like I.D. or note etc. So has existing now looks fine. Or move the D structured note value from state and handle add note to call has existing that we can remove this and the same four handle update. Note we can remove the commented out code here and set state it's gonna be changed to set. Note and we'll set note to its initial value of an empty string right here or handle update note remove the destruction State values remove the commented out code for handle delete note or move all the commented out code and 4 handle set. Note we need to expand this a little bit we'll add a set of curly braces and we need to make separate function calls here to set the note piece of state we'll pass a note and set the I.D. piece of state will pass an I.D. So that's a bit longer and then heading down to our markup. All of the references to our functions we'll just have this removed and now the last piece. If I didn't forget anything down here is back in use a fact and in our listeners we need to update state a bit differently here. So when it comes to updating state reliably we know the update or form for set state or you likely know the updated form for a set state where you can write it as a function or you get access to the previous state and can set the next state according to what was the previous state. And for example for notes say the previous state DOT notes or something like that and for our centers that we get from you state we have a similar concept. We have an update or forum where you can write a function within our set state call or setter function. And this ensures that state is reliably updated according to the previous value that it had. So starting with our on create note listener in our next function will first get the new note data then to update the notes Ray with new note according to the previous value of notes that we had will take. Set notes and the updated form for any setter is to not have the entire state object but just to have the previous value for the piece of state that it manages. For example here it would be previous notes and we write this just like we did for a set state and at the end we can decide what to return. So with our previous notes we can filter through them where we're going to check to see that the new notes I.D. is not equal to any one of the previous notes ideas. And here we can call the returned array old notes. Then we can create our updated notes array where it can spread in all the old notes and then add the new note at the end and then to set St.. We just need to return the updated notes and remove all the commented out code and we'll do the same for our on delete note listener. We'll have our deleted note data from the listener. We'll call set notes and get our previous notes. And here we'll have our updated notes or we'll take previous notes dot filter and we'll make sure each notes ideas is not equal to the deleted note I.D. and then return updated notes at the end and then for on update note or remove the D structured notes value. And once we have the updated note call set notes get our previous notes we'll find the index of the updated notes according to our previous notes array we'll create updated notes and here we're going to return updated notes and after that set note to an empty string and set ideas to an empty string. And if we wanted to organize better where we're updating state and for on update note we're updating all of our state here within the next function. We can go to handle add note and see here that we're calling set out there after we call create. Note we can take this and move it into our on create note next function so that we're updating state all in the same place. So now if I didn't forget anything we can save app hooks and try testing this out in the browser just refresh and I'll try adding a new note for example Hello amplify it enter. We see a new net was added We wanted to edit hello world and say hello hooks we can do that but it looks like I made an error within the on update. Note listener. So I'm using previous notes here for finding the index but I'm not using the previous value for creating the updated notes right. So once I fix that. Change that to previous notes and say it again. Let's try doing the same thing will change Hello hooks to Hello react. And as you can see we were successfully able to edit that. So we've moved over our note taking app to a function component that uses react hooks. And if you're interested in hooks but a lot of this seems strange to make sure to check out my react hooks course or explain a ton of this in depth. I cover all the major hooks and hooks are a very important feature to start learning right now. If you aren't familiar with them they really are the future of react and they allow us to make apps entirely with function components and move away from the traditional class syntax.