How to use State Hooks in React

Mayank Gupta
May 7 · 5 min read
Photo by Fabian Grohs on Unsplash

React Hooks is the latest addition to React in Version 16.8.0, and many React developers are excited about this addition. In this article, we’re going to talk about the State Hook that enables users to create state variables without classes. There are multiple Hooks available in React, but this article is focused on useState.

Before the release of Hooks, React Components were divided into two broad categories depending on whether the component was class-based or function-based.

Class components are capable of defining the state properties and lifecycle methods, but functional components were not able to use state or access the React lifecycle. Both components take props as an input parameter that contains data propagated from the parent components. Since functional components do not create their own state properties, they rely on the parents for input data, which made them “Stateless Components.”

  1. Stateful components (created using classes).
  2. Stateless components (created using functions).

Stateful Components

Let's see a simple implementation of the Stateful Component using Classes. In the example given below, we’re creating a simple component and are adding some state properties to the same using this.state.

The component defines the following state properties ( “Name,” “Age,” and “Designation” ), and these details are rendered as a part of the component’s UI. The code also provides us with the ability to update the state variable using this.setState. The state updates are available across the component and to the child components. The states passed to child components are received as props.

The code above creates a stateful component containing three state variables: name, age, and designation. It also contains a function updateEmployeeAge, which increments the state property by one. Since the state variable has been modified, the components displaying the age property will update across the component and trigger the corresponding changes to the UI.


Working With Stateless Components

Another way to create a component is to create it as a stateless component. These are the simple components that take props as their input parameters and display them in the UI as we previously did. A stateless component can’t define its own state variables, and it also can’t update any of the props values received. Any attempt to update the props will result in an error. Below is an example of the simple stateless component.


Working With React Hooks

Creating Stateful Components using functions

Now that we’ve seen how components were created before the latest version of React, let’s look at how they can be created using State Hooks.

With the introduction of Hooks, we can create stateful components without using classes. We can use functions to create stateful components. Since we’re defining state inside the function, we refer to these components as “Stateful Function Components.” We can use the useState hook to manage state properties inside function components.

Let’s see what the same code looks like using hooks.

The code above uses hooks to create a stateful component. We’re defining the state of the component using the keyword useState. useState takes one parameter as an input that defines the initial value for the state variable.

On invoking the useState function with the parameter, it does the following:

  1. Creates a new state variable with the name “name.”
  2. Assigns the default value as the value passed in parameter.
  3. Returns the newly created state property along with the “setter” function.

Now, let’s analyze the piece of code below to understand the useState hook.

The useState function is invoked with a default parameter, which is a string called “Mayank.” This function creates a new state property and assigns a default value to it. This function returns an array containing the following elements:

  1. The first element is the newly created “state” value.
  2. The second element is the “setter function” for the same property.

We then use destructuring and assign the element at the first index to name variable, and the setter is assigned to the variable setName. Now, this name property acts as the state variable (this.state.name) and the setName is the property setter — it updates the value similar to what we use in class component (this.setState). Calling setName with the updated value as a parameter will update the value to state property name.

The code above is equivalent to:

One of the advantages of using stateful functional components is that you no longer need to access the state properties in the following manner: {this.state.name}. In order to access the state property in Functional Component, we need to just refer to the {name} state variable.

Functional components provide a huge advantage as we can get rid of complex class logic, and we also do not need to worry about adding the this keyword everywhere in the component. Functional components are based on the concept of closures.

Additionally, it makes the application consistent. You don’t need to have half of your components defined using functions and the other half of the components defined as Classes. Using hooks, all the components can be represented in the form of “functions.” So it’s a great step toward functional programming and providing consistency across application.


Some More Benefits of Using Hooks

1. Classes are complex

Classes are difficult to handle and manage. Classes are usually not minified well, and they also make Hot Reloading difficult to handle. Hooks embrace functional programming and provide simplicity. We don’t need to have components that are of the type class and other components of the type function.

It provides uniformity across the React components.

2. Class components become hard to understand with time

As our application grows, we add lots of code to the class components, which creates complexity. It makes it difficult to break down into pieces of related functionality.

So the class components keep growing in size and complexity.

For more details on this, refer to React’s official website:

Other articles by this author:

Better Programming

Advice for programmers.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade