Complete Guide to useState Hook in React
Tags: react, reactnative, hooks, javascript
Published: 2023-02-27 18:11:45

In this article, we are going to look at how you can leverage the useState hooks in React apps, as it's one of the most basic concepts you need to be familiar with.

The useState hook is also available in [React Native](https://instamobile.io/), so in general, pretty much all the concepts can be translated into the mobile world.

## What are Hooks in React?
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. 

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. 

## What is useState in React?
The useState hook allows you to add state to React function components. It returns a stateful value, and a function to update it. 

The useState hook is a way to add state to function components in React. It accepts a single argument, which is the initial state, and returns an array with two values: the current state, and a function that updates it. 

## Creating the React App
To get started, you will need to create a React app. If you already have a React app, you can skip this step.

First, install the create-react-app package:
```
npm install -g create-react-app
```

Then, create a new React app:
```
create-react-app my-app
```

## Basic useState Code Example
Now that we have a React app set up, let’s look at a basic example of how to use the useState hook. 

In this example, we’ll create a component that displays a count. It will have a button that will increment the count when clicked. 

First, let’s create a new component called `Counter`:
```javascript
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;
```

This code creates a component called `Counter` that renders a `<p>` element with the current count, and a button that increments the count when clicked. 

The `useState` hook is used to add state to the component. It accepts a single argument, which is the initial state, and returns an array with two values: the current state, and a function that updates it. 

In this example, we use the array destructuring syntax to assign the current state to the `count` variable, and the function that updates the state to the `setCount` variable. 

The `count` variable holds the current state, which is initialized to 0. The `setCount` function is used to update the state. It accepts a single argument, which is the new value for the state. In this example, we pass in `count + 1` to increment the count by 1.

## Advanced Use Cases of useState
The useState hook can be used to store more complex state in React components. For example, you can use it to store an array or an object. 

Let’s look at an example of how to use the useState hook to store an array. In this example, we’ll create a component that renders a list of items. It will have a button that will add a new item to the list when clicked. 

First, let’s create a new component called `List`:

```javascript
import React, { useState } from 'react';

const List = () => {
  const [items, setItems] = useState([]);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setItems([...items, 'new item'])}>
        Add item
      </button>
    </div>
  );
};

export default List;
```

This code creates a component called `List` that renders a list of items. It uses the `useState` hook to store an array in the `items` variable. The `setItems` function is used to update the state. 

In this example, we use the spread operator to add a new item to the array. The spread operator creates a new array with the existing items, plus the new item. 

## Caveats of useState

The useState hook has a few caveats that you should be aware of. 

First, the state is only updated when the `setState` function is called. If you call `setState` with the same value, the state will not be updated. 

Second, the state is not automatically updated when the props or context change. You will need to use the `useEffect` hook to update the state in response to changes in props or context. 

Finally, the state is not automatically passed down to child components. You will need to use the `useContext` hook to pass the state down to child components. 

## Conclusion

In this tutorial, we looked at how to use the useState hook in React. We covered the basics of the useState hook, as well as some advanced use cases. We also looked at some of the caveats of the useState hook. 

Using the [useState hook](https://devbrite.io/useState-react-js) is a great way to add state to React function components. It’s simple to use and allows you to add state without writing a class.