Sunday, May 21, 2023

What is state in React.js? useState Hook Example Tutorial

Hello guys, I have just started a new series, React for Java developers and I am going to publish React tutorials and examples to teach React.js, one of the most popular frontend libraries to Java developers. Since most full-stack Java development is happening on React and Spring Boot, it makes sense for Java developers to learn React.js. In the past, I have also shared both best React courses and books, as well as The React Developer RoadMap, which provides all the tools, libraries, and resources you need to become a proficient React Developer. 


This series aims to teach you essential React.js concepts to Java developers and this is the second article on my React for Java developer series. In the first part, we have seen what is Redux and how to use it and in this part, you will learn how to use state in React.js.

Components are the building blocks of a react application. In other words, a UI or part of a UI is a component. If you have ever built a react component, you may be familiar with the term “state”. A react application is incomplete without a state.

In simple words, the state in react is a plain JavaScript object that controls the behavior of a component. We can say, the state is the data that manages a component.

The state is one of the most important concepts of React.js library. You just cannot build react applications without understanding the working of the state. In this article, we will discuss what the React state is and how to use it. It's also one of the common React.js Interview questions so knowing this concept will not only help in your day-to-day job but also on web developer interviews. 





What is State in React.js Application?

As mentioned above, the state controls the behavior of a component. We can have a component state that is only limited to a single component, or a global state for the entire application. For smaller applications, react provides in-built support to manage state while third-party libraries such as Redux are used to manage the global state of larger applications. 

How to use state in react? Example Tutorial

The state can be used in class-based components as well as functional-based components. In this article, we will discuss how to use state in both components.

1. State in class-based components

In the class based component, we can create a state object, and then we can update it by using the in-built “setState” method. 

Observe the following code. 

import React from "react";

class CountClick extends React.Component {

  constructor(props){

    super();

    this.state = {

      counter: 0

    }

    this.clickHandler = this.clickHandler.bind(this);

  }

  clickHandler(){

    this.setState({

      counter: this.state.counter + 1

    })

  }

  render() {

    return(

      <React.Fragment>

        <button onClick={this.clickHandler}> Click here </button>

        <p> {this.state.counter} </p>

      </React.Fragment>

    )

  }

}

export default CountClick;

In the above code, the state is declared in the constructor.

this.state = {

  counter: 0

}

Whenever the button is clicked, “clickHandler” is invoked and the value of “counter” is incremented by 1 using the “setState” method. 

clickHandler(){

    this.setState({

      counter: this.state.counter + 1

    })

  }

In the JSX, we can access the state like the following. 


<p> {this.state.counter} </p>


This is how the state is used in a class-based component. 


2. State in functional component

Earlier, it was not possible to use state in functional components. There was no mechanism for it. But with the introduction of react hooks, we can use state in a functional component and more easily and simply. 

To use state in a functional component, react provides the useState hook. Before moving to the code, let’s discuss in brief what are react hooks. 

React hooks are functions that can be used to “hook in” state and lifecycle methods. In simple words, react hooks let us use state and lifecycle methods in functional components that were earlier limited only to the class based components.

Observe the following code.

import React, {useState} from "react"
 
function CountClick() {
 
  const [counter, setCounter] = useState(0);
 
  return(
 
    <React.Fragment>
 
      <button onClick={() => setCounter(counter + 1)}> Click here </button>
 
      <p> {counter}  </p>
 
    </React.Fragment>
 
  )
 
}
 
export default CountClick;

The above code is equivalent to the earlier class-based code. Isn’t it easier to understand? And it also has fewer lines of code. Let’s understand what is happening here.

Observe the following line of code.


const [counter, setCounter] = useState(0);


Here, the “useState” hook is used to create a state named “counter” and a function named “setCounter”. Now, the “setCounter” function will update the state. Moreover, we have passed 0 to the “useState'' hook, meaning, the initial value of “counter” is 0.

Unlike the class based component, we did not create a separate function to update the state because we already have one. 

<button onClick={() => setCounter(counter + 1)}> Click here </button>


Now let's see how we can access the state in JSX.

<p> {counter}  </p>

Isn’t it easier to use state in a functional component?


That's all about how to use state in the React.js library. The state is an essential part of a react component. It helps us create dynamic and interactive user interfaces. In this article, we discussed what state is and how to use it in class as well as functional components. 

In class-based components, we have to create a constructor, declare the state in it, and use the “setState” method to update. It works fine but the state is easier to use in the functional components. The “useState” hook is simple and easy to use. Moreover, the code is less complicated and has fewer lines. 


Other React and Web Development Articles and Resources You May like to explore

Thanks for reading this article so far.  If you like these free React framework courses, then please share them with your friends and colleagues. If you have any questions or feedback, then please drop a comment.
at

1 comment: