ReactJS useState Hook

ReactJS useState Hook

Understanding useState Hook in ReactJS

Before the official release of React 16.8, functional components had very less features as compared to class components. Class components can hold state but functional components couldn't. So, functional components were stateless and also used to refer as 'Stateless Functional Components.

React 16.8 introduced Hooks and exposed various features of class components in functional components. With the help of React Hooks, we can use features of class components, such as maintaining state in components, in functional components. The two most common React Hooks are useState Hook, which allows functional components to maintain state, and useEffect Hook, which allows functional components to implement side-effects.

In functional components, the state can be of any type like an object, string, array, boolean, number, etc. unlike only of an object type in class components. In this tutorial, we are going to learn how to maintain state in functional components with the help of useState Hook. We will make a simple counter using a functional component where we will take count(number of counts) as a state. So, first, create a react app and edit the App.js file in src directory. App Component should look like this.

import './App.css'
function App() {
  return (
           <div className="App">

          </div>
  )
}

export default App

Now, we will import React and useState Hook in our App Component.

import React, {useState} from 'react'

Since we are taking count(number of counts) as a state. So, let's define our state i.e. count, and a method to update it with useState().

count - state

setCount - method to update the state (count)

The useState() assigns the argument passed to it to the state. Initial value of count is 0, useState() must assign 0 to count.

import './App.css'
import React, {useState} from 'react'

function App() {
  const [count, setCount] = useState(0)
  return (
           <div className="App">

          </div>
  )
}

export default App

Let's go for JSX part. We want to display the current value of count and an increment button. When this increment button is clicked, the value of count increases. To implement this, we add an event listener for on-click event and event handler.

import './App.css'
import React, {useState} from 'react'

function App() {

  const [count, setCount] = useState(0)

  return (
           <div className="App">
                <div>
                    <h1>Count - {count}</h1>
                </div>
                <button onClick={clickHandler}>Increment</button>
          </div>
  )

}

export default App

clickHandler() is an event handler for on-click event on increment button. This clickHandler() is responsible for incrementing the value of count, which can be done easily by calling setCount() method in clickHandler(). The incremented value of count is the current value of count plus 1 i. e. count + 1, which is a new state of count. So, count should be updated with this value, which can be done easily by passing it as an argument to setCount() while calling it. setCount will update count with this new value.

import './App.css'
import React, {useState} from 'react'

function App() {

  const [count, setCount] = useState(0)

  function clickHandler() {

      setCount(count + 1)

  }

  return (
           <div className="App">
                <div>
                    <h1>Count - {count}</h1>
                </div>
                <button onClick={clickHandler}>Increment</button>
          </div>
  )

}

export default App

Finally, our counter will look like this. Initially, our state i.e. count is 0.

Screenshot (6).png

When the increment button is clicked, our state i.e. count gets updated.

Screenshot (11).png

If the increment button is clicked again, our state i.e. count gets updated again.

Screenshot (13).png