React: From “Class” Components to Hooks
So you got started on React and were finally getting comfortable using class components, but of course, this is the tech field, and every time you learn something new, there is already something newer coming out trying to replace it. However, not every new technology ends up successfully taking over and you may end up wasting your time with it. Are hooks really worth learning? What are the advantages of using them instead of class components? Since my experience with React and hooks is limited, and since often times you need to see things in action in order for you to appreciate them, I will only scratch the surface of the answer to such questions and will instead focus on showing how to use the most commonly used hook, useState.
In summary, the main advantage of using hooks is that they allow you to do everything that a class component does, but inside a functional component. As you may already know, functional components are much lighter in weight, so switching to functional components can provide a huge boost in performance, especially in large, complex applications. Additionally, using hooks such as useEffect can simplify an otherwise convoluted set of events inside a componentDidUpdate. Last but not least, hooks are used by many external libraries, such as material-UI, so you will need to understand hooks in order to use and customize some of the components offered by such libraries. As you can see, hooks are now well established and it will probably be only a matter of time until you will have to learn them if you are working with React.
If you are ready to start learning hooks, it’s best to start with the most-often-used and perhaps easiest to learn one, useState, but before we go into how to use it, you will need to learn one rule that applies to all hooks: You cannot use hooks inside loops or any conditional statements. Keeping that in mind, let us take a look at what useState does. As the name suggests, useState will provide you with the equivalent of a class component’s state. It also allows you to name the function that will change that ‘state’ as follows:
If you are not familiar with destructuring, you can learn more about it here:
In summary, you get to choose the name of your state (first element of the array) and the function that allows you to update it (second element of the array), and the default value of state is set inside the parenthesis on the right hand side. Once you have your “state” set up, using it is not that different from using it in a class component. Your component will update every time state updates, and you can call your setState equivalent inside any custom function within the component and use that custom function as a callback function for any event, as you will see in the example below:
In this example, we picked number to be the name of our state, and setNumber to be the name of our “setState”. We then call setNumber inside a callback function to be invoked upon a click event. Each time, the button is clicked, the number displayed (starting at 1) will double and your component will re-render to display the updated number. For an example as simple as this, we could have also called our setNumber function directly as the callback for the click event as follows:
As you can see, useState is fairly user friendly and even saves you from having to write the word this in front of everything, so there is no reason you should be avoiding using it. Once you become comfortable using useState as shown above, you can play around with having multiple useState hooks in your function, each giving you and independent ‘state’ and its corresponding ‘setState’ function that can be called to update each ‘state’ independently. Doing so would be an alternative to having a single state object with multiple keys in it; keeping each state independent from each other can make it easier to manage updates and might be one of the biggest advantages provided by useState.
