A Complete Beginner's Guide to React useState hook [Part 1]
Tags: javascript, react, beginners, reacthooks
Published: 2021-11-26 17:17:36

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](https://reactjs.org/docs/hooks-intro.html) introduced late in [October 2018](https://www.youtube.com/watch?v=dpw9EHDh2bM&ab_channel=ReactConf), 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
```javascript
import { useState } from 'react'
```
*or simply, *
```javascript
React.useState
```

The former approach is much common across codebases and mentioned in the [official react docs](https://reactjs.org/docs/hooks-state.html) 

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

<iframe src="https://codesandbox.io/embed/lingering-violet-pvfhj?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="lingering-violet-pvfhj"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>


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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment))

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.

```javascript
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.

```javascript
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,

```javascript
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

```javascript
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](https://reactjs.org/docs/hooks-reference.html#usereducer) 

### 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


```javascript
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 :
```javascript
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,
```javascript
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!


### 8. Why someone would use a hook?

i. Easier to test.

ii. Provides good readability.

iii. Performance boost.

iv. Reduction in bundle size.


**Important Resources that I have collected over time 😃 **

i. [https://medium.com/@quinnlashinsky/destructuring-arrays-in-javascript-2cb003160b3a](https://medium.com/@quinnlashinsky/destructuring-arrays-in-javascript-2cb003160b3a)

ii. [https://levelup.gitconnected.com/react-hooks-gotchas-setstate-in-async-effects-d2fd84b02305](https://levelup.gitconnected.com/react-hooks-gotchas-setstate-in-async-effects-d2fd84b02305)

iii. [https://www.youtube.com/watch?v=O6P86uwfdR0&t=221s&ab_channel=WebDevSimplified](https://www.youtube.com/watch?v=O6P86uwfdR0&t=221s&ab_channel=WebDevSimplified)



Originally written by [Abhinav Anshul](https://javascript.works-hub.com/users/c49b5fad-2fef-4acc-aa7a-7cd78f11c9a1?utm_source=dev_to&utm_medium=blog_xpost) for [JavaScript Works](https://javascript.works-hub.com/learn/a-complete-beginners-guide-to-react-usestate-hook-f85a0?utm_source=dev_to&utm_medium=blog_xpost)