React Hooks: A transition of functions from stateless to stateful components

A little while ago, at work, we were asked to build a new UI product and that is when I came across hooks. Having previously worked with React and class-based components, I was a little skeptical at trying hooks given the deadline. But in the end, we further went on developing the product using functional components. And I can say, I am really happy with how the development cycle went.

Now, like me, I know a lot of people would have been or still are skeptical about shifting from class-based components to functional components. So, here I am bringing a series explaining hooks and how each hook helps in the transition. So, if you like the idea and are interested in going in this journey forward, then let's go ahead and be ready to get hook’ ed.

Hooks changed the way react functions could work. From being stateless components, functions now have superpowers like handling states and capturing lifecycle methods.

Let's discuss the function’s weapons i.e. hooks :

Most used Weapons ( Basic hooks):

Additional Weapons ( Additional hooks):

Now, let's start some detailed description on how each weapon i.e. hooks helped in making these functions powerful.

useState -

useState is the most commonly used of all the built-in hooks. It is similar to this.setState, we use it to set the state(s) of our functional component.

const [state, setState] = useState(initialState)

useState returns a value and a function to update that value.

During the first render, state is equal to initialState.(Similar to how state variables are equal to the values defined in constructor of class-based components during the first render).

So, as I was writing this I went to my todo list to mark this as in progress. Considering how todo lists make our life easy, We will start this series and our transition from class-based components to functional components by building a very basic todo app.

So first, we will jot down all the things necessary for a basic todo app -

  1. We need a way to add a todo item in our todo list.
  2. We need a way to update the status of our todo item.

Below is the code snippet providing a text box to add a todo item and also some buttons to mark its progress.

Now, as you can see useState pretty much works like this.setState. Like the state component renders the class again similarly, a change in the useState variable renders the function again.

Visit this link for demo.

Although useState is one of the most commonly used and fairly easy to understand hook, there are few things that we should be aware of for better and correct usage of useState:

  1. Functional updates:
    If the new state is related to the old state, then it's a good practice to pass a function to the setState. One of the problems that I solved using this is mentioned in one of my previous blog.
  2. Lazy initial state:
    It is a state used during the initial render. For more info on this, visit https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

That's all from my side, thank you so much for reading the blog. I will be continuing this series and will keep on discussing different hooks. Also, it will be fun to try useState by yourself by addingy functionalites like removing the todo items(just need to add a button and remove it from the list using setState) or archiving the todo items(use another useState hook and introduce a new variable for saving the archived todos).

This story is a part of the ongoing series about react hooks-

Software Developer by profession, with a passion of sharing knowledge.

Software Developer by profession, with a passion of sharing knowledge.