React Hooks useState – Managing State in a Functional Component

React version 16.8.0 brought a new feature to the ecosystem – React Hooks. Apart from many uses, React Hooks useState specifically helps us hook into the state of our component.

In a previous post about ReactJS Functional Components, we looked at basics of Functional Components. However, it was pretty clear that we cannot use state in functional components.

At least, that was the case till React Hooks came along.

Though there are various types of hooks, we will be specifically looking at State Hooks in this post. The State Hook basically lets us access state in a pure functional component. If you’re guessing it right, it basically helps us make our functional components act like class components.

1 – Starting with React Hooks useState

The first step in using a State Hook in your functional component is to import it.

import React, { useState } from 'react';

Here, while importing React itself, we also important the useState hook. It’s just as simple as that.

2 – Accessing the State in the Function

The next step to understand is how we actually use this hook.

To know it better, let’s create a functional component using React Hooks. For understanding purpose, we will simply create a form having only one field.

Below is the code for such a component.

const App = props => {
  
  const [name, setName] = useState("Saurabh");
  const handleChange = event => setName(event.target.value)

  return(
    <div>
      <form>
        <label> Enter Name:
          <input type="text" name="name" value={name} onChange={handleChange}/>
        </label>
      </form>
    </div>
  )

}

Let’s walk-through the above code snippet:

• We use useState() hook to set up the initial state for our component. React will preserve this state between re-renders. Here, we can perform two things with just the one statement. Basically, we define a variable “name” and also set up its initial value. Moreover, we also provide a function setName. The job of this function is to update the value of name attribute.
• In the handleChange function, we can simply use the setName function to update the value of the name property. We trigger the handleChange function using the onChange property of the input label. No more explicit binding of event handlers.
• Another important thing is the absence of any constructor to setup state. Basically, we don’t need to setup state in a constructor.

3 – Are Hooks the future? And are Class Components dead?

Well, judging by how React is moving, we would be seeing more usage of hooks in the future.

However, that’s not to say that class components are dead. As per official docs from React, there is no plan to remove classes from React. There is very little incentive to refactor your existing class components to use Hooks instead of class.

But for newer development, it is certainly better to go with the Functional Components first approach. If you realize that you need to manage state in a component, you can simply add hooks to it without needing to make a ton of changes.

Another important thing that hooks have going for it is that they don’t fundamentally change the way React works. We still have the same concepts of lifecycle, state, context and so on. Only thing that changes is in the way of handling these concepts.

---

In this post, we have taken our first step to understand React Hooks. We specifically saw React Hooks useState to tap into state management in a functional component.

We will be looking into more such hooks in future posts.