The useState hook in detail

Many of you are already familiar with hooks in React that let us use state and lifecycle methods in functional components. In this blog post I want to look in more detail at the useState hook. (By the way, if you are interested in why you should switch to functional components in React check out my blog post here).

Photo by Timothy Dykes on Unsplash

Why do we need the useState hook? Before hooks were introduced in 2018 we could use state only in class components, updating it in the setState method. For a long time functional components couldn’t manage state on their own and were only used for rendering UI elements. In React 16.8 this functionality was fixed and now we can handle state in functional components as well.

Before we move on to the useState hook, I would like to remind you of a few important rules of using hooks in general.

• First of all, don’t call hooks inside loops, conditions or nested functions. Always use them at the top level of the function before any early returns.
• React relies on the order in which hooks are called, which allows you to use multiple State or Effect hooks in the same component.
• Don’t call hooks from regular JavaScript functions; call them from React function components or from custom hooks.

Starting with the useState hook

The useState hook enables you to add state to functional components. It is especially useful for the local component state. To start working with the State hook, we first need to import it from React.

Import React, { useState } from ‘react’;

Now let’s add the useState to our component.

The useState hook takes the initial value of the state variable as an argument, the initial state can be any type you want (a string, a number, an array, an object) or a function. The initial value will be assigned only on the initial render. Each call to useState returns an array of two elements. The first element of the array is the state variable and the second one is a function to update the value of the variable.

There are several ways to retrieve elements from the returned array.

First, is using an index:

Or you can use array destructuring:

The second way is preferable because it allows you to use the state variable like any other variable.

Let’s take a closer look at what is happening in our Count function. We called the useState hook, which took in the initial value of 1 as an argument. After that we added the incrementNumber function which changes the initial value when the button is clicked and adds 1 to the current state. Thus, each button click increments the new value and the number increases.

Now let’s look at the next example where we have to use several State hooks.

When we click on the button, the initial value will only be increased by 1, though we expected it to be increased by two. To make this piece of code work, you should call the function in the first argument which will return the previous state of the number. Each time setNumber is called the number value will change .

Now every time we click the button our result will increase by two.

There is no limit to how many useState hooks you can use in one component. You can either call useState several times or shove everything into an object.

const [dog, setDog] = useState({
  name: '',
  breed: '',
  age: 0
});

Now we can retrieve the dog values by using dog.name, dog.breed, etc.

Once your application grows, state grows proportionally, so storing multiple values in useState doesn’t seem like a good idea anymore. In this case you can try to use the useReducer hook that is better suited to managing state with multiple values.

Today I looked into how use the useState hook and also took some time to refresh my memory on some basic rules for using hooks. Thanks for reading. Hope you’ve learned something new.