DEV Community

Cover image for React Hooks: Understanding the <useState> hook and then building a mini-app with it
Abubaker Saeed
Abubaker Saeed

Posted on • Originally published at abubakersaeed.com on

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

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 πŸ™‚

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");

...
Enter fullscreen mode Exit fullscreen mode

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

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

}
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>

...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

To this:

<div>A: {appleEaten} {appleEaten}</div>
Enter fullscreen mode Exit fullscreen mode

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>

...
Enter fullscreen mode Exit fullscreen mode

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.

Further reading

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
🌱 Social: Twitter | CodePen | GitHub

Discussion (0)