A Complete Beginner's Guide to React useState hook [Part 1]

Hi 👋

In this article, we will deep dive into the world of React hooks, useState in particular from a beginner's point of view.
React Hooks are the result of a continuous rise in functional programming over the years.

We will have a look at its working, common mistakes we are likely to encounter, comparing it with class-based components and best practices.

useState is a React Hook introduced late in October 2018, which allows us to have state variables in the JSX functional component. we pass an initial value to this function, and it returns a variable with a new state based on functional logic.

Let's go through the following topic one-by-one:

What is React useState hook?
Declaration useState hook in React
Understanding & implementation using a simple counter application.
Comparing it to a class-based component
Handling multiple states in a single component.
Gotchas
Common Mistakes
Why someone would use a hook?

1. What is React useState hook?

Hmm, an interesting question!
As we stated earlier, the useState hook allows us to have state variables in the JSX functional component.
It takes one argument which is the initial state and returns a state value and a function to update it.

2. Declaration of useState hook

useState is a named export from React,
So, we can either do

import { useState } from 'react'

*or simply, *

React.useState

The former approach is much common across codebases and mentioned in the official react docs

3. Understanding and Implementation

It's always a good idea to try things out ourselves rather than reading documentation, so let's jump right into the code.

We'll build a counter application and to keep things simpler, we won't go into prevState (yet), see point 7(ii)

As we can see, we are importing the useState hook at top of the file, and a handful of CSS styles to keep things centered and clean enough.

Moving further, we have a functional JSX component called App, which is rendering increment and decrement buttons and a count text in between. This count will render every time the state gets updated by the button clicks.

The useState hook takes an initial state, count in this case, and returns a pair of variables, count and setCount, where count is the current state (currently set to 0) whereas setCount is a function which updates it asynchronously.

At line number 6, we are using array destructuring to return the pair of variables at array index of 0 & 1.

(Read more about array destructuring here)

Moving on, both the button has an onClick event, which triggers an anonymous function, which increments or decrements the count variable using the setCount function. This click even results in the re-rendering of the count state.

Similar to the count state variable, we are allowed to use different data types such as objects, arrays, strings, boolean, etc.

const [firstname, setFirstname] = useState("")
const [age, setAge] = useState(0)
const [isLoggedin, setIsLoggedin] = useState(false)
const [form, setForm] = useState({
    username : "",
    password : ""
})

As we can see, all the above useState hooks are valid state data types.

4. Comparing it to a class-based component

While the useState hook is a new addition to the React library, it somewhat does the same thing as this.state used with class-based components.
Confused?

Let's see how we would write the same counter app in a class based component.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // change code below this line

  increment() {
    this.setState({
      count: this.state.count + 1
    });
  };

  decrement() {
    this.setState({
      count: this.state.count - 1
    });
  };

  render() {
    return (

   <div>
   <button className='inc' onClick={(e) => this.increment(e)}>Increment!</button>
    <button className='dec' onClick={(e) => this.decrement(e)}>Decrement!</button>
  <h1>Current Count: {this.state.count}</h1>
  </div>
    );
  }
};

5. Handling multiple states in a single component

Oh! what if we have multiple states to handle and not just a silly count variable, what about then? Where do we store those variables? Are they similar to this.state?

Well, handling of multiple state variables is somewhat different in useState compared to this.state
In useState, we tend to write as many state hooks as there are states
Like this,

const [lastname, setLastname] = useState(null)
const [firstname, setFirstname] = useState(null)
const [age, setAge] = useState(0)

Or group similar things together using an initial state object

const [islogin, setIslogin] = useState({
    username : "",
    password : ""
})

However, when building quite a large application it is incredibly difficult to keep track of all the useState hooks and is not very practical, hence useReducer comes into the picture, which is beyond the scope of this article.
Read more about useReducer here

6. Gotchas

i. We can only use useState (or any other hook) inside a function component.

ii. React Hooks must be called in the same order in every component render, in simpler words, any hook should be at the very top and inside the function component without any unnecessary check, loops, etc
For example, the following code is wrong, and won't behave as we expect

function App(){
    if(true){
        const [count, setCount] = useState(0)
    }
}

iii When we update the state, the component re-renders each time.

7. Common Mistakes

i. Never ever update the state directly, like this :

function incrementCount(){
    count = count + 1
}

Instead, we have a function (remember setCount function?) that will manipulate the state variable as we need,
Similar to this,

function incrementCount(){
    setCount(count + 1)
}

Or, we can use an anonymous function like how we used it in the first counter application.

ii. Remember, how we talked about, "Keeping things simpler" at the very beginning of this article, well, this is the moment!

In order to use useState effectively, we absolutely want to change and mutate the state variable based on its initial state, and don't want unexpected rendering.
To do so, we need to pass a previous state parameter to the function and based on that, mutating the state variable.
Confused?
Okay, Let's see some code!

setCount(count + 1)

should be

setCount(prevState => prevState + 1)

Here, prevState ensures us to give us current value of count no matter what, and in fact a better and recommended way to write hooks!