React useState Hook

An introduction on how to use useState Hook in your React application

Thursday, October 21, 2021

hook in a terrible state

What is a React hook?

From the React's official documentation

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

What does it mean?

To give you more context, before React v16.8, we can only enable a component to have a state and manage it if a component is created using a class.

A Functional component is mainly used as a dumb component where the decision on how to render it differently is derived from the props it will receive from its parent component.

If you notice, we need fewer keystrokes to create a functional component, but the problem is it would not be reactive to state changes. Let's try to mimic all the class component behaviors to our function component.

You can modify the component all day long; however, it won't react to state changes.

What if we can have the simplicity of the functional component and still have the ability to react to state changes?

React hooks to the rescue!

As per the title of this blog, I will only discuss useState which is the solution related to our previous problem. I will discuss the other types in another blog.

Here are some ways on how to can create a useState hook:

As mentioned in the above examples, here's what you can pass in a useState as an argument:

  • nothing
  • primitive value
  • object or array
  • function(discussed in this blog)

If you passed one, it would serve as the default state for that instance, else default state will be null

When useState is invoked, it will return an array. The first element is the state and the second element is the state updater.

A simpler and more readable way to access the state and the state updater is by using the array destructing assignment. The convention for the second element is to prepend it with set, then make it camelCase.

Let's replicate the behavior of the class component in a function component using a useState hook.

Hooray! We just created a much simpler stateful component using useState. Let's break down what happened.

We created a new state with a default value of some value. attribute will serve as the variable containing the default and future value of this hook. setAttribute will be the function that can modify our state

We define a method that will handle the change event from our input element.

We display the state and attach handleStateChange to onChange event.

You can also simplify further if you want

Does it mean we should not use a class component ever again?

I always use the functional component approach, but if I'm working on a very old codebase where there's no way to migrate to the newer version, I will use a class component. Also, it is written in the React documentation that There are no plans to remove classes from React. However, there are some use cases like when using Inheritance, creating Error Boundary, explicit lifecycle methods, and such that cannot be directly done using a functional component, although there are many workarounds to apply the expected behavior.


useState will simplify how we can create a component. Less code means fewer bugs(if used properly) and is easier to read, resulting in better maintainability.