React Hooks: Understanding the <useState> hook and then building a mini-app with it

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.

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.

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.

Introduction

Limitation: Hooks can only be used in functions

Building a mini-app

Wrapping up

Further reading