Introduction to React Hooks

How to use State Hooks in React

Mayank Gupta
May 7, 2019 · 5 min read
Image for post
Image for post
Photo by Fabian Grohs on Unsplash

Technofunnel brings another article on React Hooks, which 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 React 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.

Image for post
Image for post

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).

For Quick tutorial on Hooks, refer to the following video tutorial:

https://www.youtube.com/watch?v=383oe-B-QGA

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, 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:

React’s “useState” Hooks

Other articles by this author:

TechnoFunnel

TechnoFunnel focus on learning and understanding the programming concepts

Sign up for TechnoFunnel

By TechnoFunnel

Getting stared with Latest Technologies. Connect with us for more detailed articles and in-depth explanation of many frontend and backend Technologies and concepts Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

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 https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

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 https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store