Hooks and Hooks

Warning: Not a fishing blog.

In modern day technology, there are many ways for us to create a frontend application. Some of the most popular frameworks used are jQuery, Angular, Semantic UI, Vue, React, and Ember. The picture above hints what I will be talking about today, React! I believe it is the most versatile framework to use because of the amount of flexibility you are given. We can create class components and functional components to produce beautiful websites. However, React only allows class components to hold the state and in order for a functional component to have state is through props. That’s pretty upsetting, functional components are fun to use and it makes the code look nicer.

React is wonderful and solved the problem with functional components with useState, useEffect, and so on.

If you don’t know, React created a solution for our problem by creating a wonderful thing called hooks. React documentation states that, “hooks are functions that let you “hook into” React state and lifecycle features from function components.” This literally means that React users can now implicate some state in functional components!

To start using hooks, we must import the useState from React. On the first few lines of code, we should all be able to see “import React from ‘react’”. We are allowed to de-structure this line of code and change it to: “import React, { useState } from ‘react’”. This will enable us to use hooks in a functional components. One thing to note, we cannot use hooks on class components because they already have state. Everything in a class component already has a life cycle without hooks. Let’s create a state that will change a number with a click of a button.

Right now nothing happens when we click on either button.

Figure 1.2 Initial set up

Here, we have two buttons that is suppose to change the number. In order for us to useState we assign it to a de-structured array that will contain the initial state and the changed state. The code below shows you how to import useState as well as changing the span into the initial value. At the end of line 6, we are setting the default value of count to 24 instead of 0.

Figure 1.3 How to properly set your states in functional components

To change the state of count, we need to create two functions: one that will increment the count value by two and another one that will decrement the count value by one. In figure 1.3, the two functions are self explanatory. DecreaseCount is taking the state and subtracting it by one and increaseCount is taking the state and adding it by 2. To explain this better, line 11 and 15 of figure 1.3 is taking the previous state and changing it to the next state. Think of it as a before and after: before we take the state the value will be 24 (initial state value), after we take the state it’s value will either be 23 or 26 (new set state). We are using a function of setState to properly change the previous state to the new state.

Basic functions of a hook!

Now let’s make it a little more complicated and change our state a bit. We will now make the count as an object and add an additional property of click just to have to fun with it.

Figure 1.4 We turned our default value into an object that has a property of count and clicked

In figure 1.4, we have changed the data type of our default value. Instead of an integer it is now an object and it is a little more tricky to change the state. In order for us to change the state please look carefully on lines 9 and 10. We have to create a variable that will hold the state object of count and click because it will be really annoying to call state.count or state.clicked constantly in all of the functions that will change the state. Now in both functions, we are calling on setState and taking the previous state object and returning a new object value. We have to involve all the states together or else they will go missing. When the page re-renders, the only thing it will render will be the change state value. So let’s say that I did not involve the state of clicked, when I click on one of the buttons, the clicked state will go away (line 30 will only show clicked:). One amazing thing about hooks is that we are allowed to separate states as much as we want.

Figure 1.5 Two different ways of using hook states

In figure 1.5, I duplicated the buttons and the counter to show the flexibility you are given. Lines 12 and 13 show the previous way we created states with hooks just like in figure 1.3. Here we didn’t set the state value as an object, but instead we separated the concerns (states) so we don’t have to do what we previously did before on figure 1.4. You can also look at the difference in this figure ←and you’re very welcome to use either! They both have trade-offs depending on the situation, but if you don’t like to use objects then create states with figure 1.3’s structure, but I believe it is better practice to use hooks with objects. Make it look like a class component. 😜

Two ways to use hooks, refer to figure 1.5

I hope this has clarified the amazing things you can do with hooks in functional components! 🍻🍻🍻