React Hooks: Understanding the <useState> hook and then building a mini-app with it
Tags: react, hooks, tutorial
Published: 2021-08-23 09:57:14

---
title: React Hooks: Understanding the <useState> hook and then building a mini-app with it
published: true
date: 2021-08-23 00:00:00 UTC
tags: react, hooks, tutorial
canonical_url: https://abubakersaeed.com/blog/react-usestate-hook/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b4cyfm1a1g9dlwhintq.jpg
---

> _This article is originally published on my website and if you'd prefer reading on my website, here's the link [abubakersaeed.com/blog/react-usestate-hook](https://www.abubakersaeed.com/blog/react-usestate-hook/)_ 🙂

In React v16.8, the team introduced the Hooks API, which pretty much changed the way we write React. In this article, we're going to explore the `useState` hook.

## Introduction

`useState` hook is mostly used to set up and control the state of the component. It's just a function that we call and pass the initial value in — which gives us a returned array that includes two items; the first one is _current value_ and the second one is a _function_ which we can use to update the current value.

```
import React, {useState} from "react";

...

let [value, setValue] = useState("Forest");

...
```

**Note:** We're using array destructuring to store both items in variables. If it's new to you, you can learn about it at MDN ([https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring\_assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)).

## Limitation: Hooks can only be used in functions

If you're React developer for a long time like me, you'd know that React is mostly all about class-based components — with the release of the Hooks API, they've changed that. To use hooks we have to go with a functional approach otherwise Hooks won't be going to work.

```
import React, {useState} from "react";

// <App /> Component
function App() {

  // useState hook
  let [value, setValue] = useState("Forest");

  // JSX
  return (
    <h1>{value}</h1>
  )

}
```

The `<App />` component is going to render a heading with a text displaying the value on the screen which in our case is "Forest" — which we've passed as our initial value in the `useState` function.

That's all! This is the syntax and minimal example of the `useState` hook. It's a simple and common hook — but in my opinion, _extremely_ important React hook.

## Building a mini-app

We'll be going to create a mini-app, where the focus will only be on a `useState` hook (~in action).

```
import React, {useState} from "react";

function App() {

  let [appleEaten, setAppleEaten] = useState("Not Yet!");

  return (
    <div>
      <h1>React Mini App</h1>
      <div>
        <div>Q: Are you done eating Apple?</div>
        <div>A: {appleEaten}</div>
      </div>
    </div>
  )
}
```

The items in the returned array from the `useState` function, we can name their variables anything — meaning we don't have to give them a name of value and setValue — we can give them any name we want, however, it is a good practice that for the second variable we give it a same name as the first one, uppercase the first letter and add "set" before it. That way it'll be easy for us to remember what the second variable will do e.g [`color`, `setColor`].

Now let's update the `appleEaten` value using the `setAppleEaten` function.

**Note:** Anywhere where we're using the `appleEaten` variable, those places are going to update automatically to the newest value without us doing any extra work — In other words, React will handle that for us.

Alright, add an `<button />` with an `onClick` event on it.

```
...

  <div>A: {appleEaten}</div>
</div>

<button onClick={function() { setAppleEaten("Yup!") }}>Change answer</button>

...
```

Now in the browser when we click on the `<button />`, it'll execute the function and inside that function, it will execute the `setAppleEaten` function which in result will update the `appleEaten` value with the value that we've passed in the `setAppleEaten` function and then the places where we are using the `appleEaten` variable will going to update automatically to the newest value.

In our app, we've only used the `appleEaten` variable once but we can use it as many times as we want and they all will display the newest/current `appleEaten` value in the browser.

Just for curiosity's sake, change:

```
<div>A: {appleEaten}</div>
```

To this:

```
<div>A: {appleEaten} {appleEaten}</div>
```

And then click the `<button />` in the browser. (Aside: It'll also increase the cuteness in the tone even more! 😊🥰)

To make it more interactive we can add another `<button />` which will change the `appleEaten` value back to "Not Yet!" when clicked.

```
...

<button onClick={function() { setAppleEaten("Yup!") }}>Answer "Yup!"</button>
<button onClick={function() { setAppleEaten("Not Yet!") }}>Answer "Not Yet!"</button>

...
```

Phew! We've made our mini-app — This is the final result of our app along with code on [CodeSandbox](https://codesandbox.io/s/react-usestate-hook-final-1s4t2).

{% codesandbox 1s4t2 %}

## Wrapping up

We can add as many states as we want, the way of doing that is the same, we use the `useState` function and store items from the returned array in variables and so on... Also, we're not limited to only the 'String' value, meaning we can pass anything e.g array, object, boolean, etc. in the `useState` function.

#### Further reading

- Using the State Hook ([https://reactjs.org/docs/hooks-state.html](https://reactjs.org/docs/hooks-state.html))
- Rules of Hooks ([https://reactjs.org/docs/hooks-rules.htm](https://reactjs.org/docs/hooks-rules.htm))

I hope you've enjoyed the article as much as I've enjoyed writing it and found it helpful!

🌿 Abubaker's website: [https://abubakersaeed.com](https://abubakersaeed.com) 
🌱 Social: [Twitter](https://twitter.com/AbubakerSaeed96) | [CodePen](https://codepen.io/AbubakerSaeed) | [GitHub](https://github.com/AbubakerSaeed)