A Quick Introduction to the useState Hook

ReactWithMe is a series for aspiring and seasoned React developers who want to strengthen their foundational knowledge of the most popular frontend library. In this blog post, we will explore useState as well as an introduction to Hooks in React.

Hooks are relatively new features in React. They were introduced to allow cleaner, more manageable code by allowing us to utilize use state and other React features without writing a new class. In sum, hooks “hook” into the lifecycle of a React state from the component’s function. Hooks are incredibly beneficial for developers. They allow us to write components with ease. There are many types of hooks in react. For this post we will be going over useState.

useState in Action

The best way to understand useState is to see it in action. Since useState is an export from React, we can bring it into the top of our file like so:

import { useState } from 'react'

What we want to create is a basic counter that increments based on the clicks of the user. It should look something like this:

We can start by calling useState with array destructuring.

export default function App() {
  const [count, setCount] = useState(0); 
}

So what exactly does calling useState like this do? In the above example, we have array destructuring with two variables called "count" and "setCount". They could be named anything you'd like so long as it's consistent. But the general convention is to make it descriptive of whats being changed and to have the second variable begin with "set" followed by the name of the first variable.

The useState hook accepts an "initial state." This is the current state of the count as it stands, as represented by the count variable. Since our counter will begin with 0, we will have useState(0). The job of setCount will be to update the counter asynchronously.

Moving along we can construct our program like so:

import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const clickDownHandler = () => {
    setCount(count - 1);
  };
  const clickUpHandler = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <button onClick={clickDownHandler}>-</button>
      <span>{count}</span>
      <button onClick={clickUpHandler}>+</button>
    </div>
  );
}

By calling useState we are telling React that it should manage some value for us. Right below our useState, we have two handlers which will tell our counter what do do when they are clicked (as prompted by the onClick method called on both the "+" and "-" buttons at the bottom of our code.

But what exactly does useState return? useState returns two values (the current state and the one which it should be updated two), hence the array with two values set to const. Essentially, whenever we want to update the count, we call the function setCount. Therefore, clicking the buttons will therefore cause a re-rendering of the entire component to match the new state.

There are five 3 takeaways we should remember however when using useState (or any hook) in React:

Hooks should always sit at the top level of your component and should never be called from inside a loop or a nested function
Hooks should only be called from functional components. Never from a regular function.
Hooks can call other hooks.

For a more detailed explanation of useState, read the reactjs documentation page.

ReactWithMe: A Quick Introduction to the useState Hook