React UseState Explained With Examples
By: Mehdi Aoussiad
Tags: Programming, Web Development, React, JavaScript, Coding

React UseState Explained With Examples

Learn about React UseState with practical examples

Photo by Ferenc Almasi on Unsplash

Introduction

React provides a bunch of hooks that allow you to add features to your components. These hooks are JavaScript functions that you can import from the React package. However, hooks are available only for function-based components, so they can’t be used inside a class component.

In this article, we will learn about the React UseState hook with practical examples. Let’s get right into it.

What is UseState and when we use it?

As I said React provides you with a bunch of hooks that you can use on your application. However, useState and useEffect are the two important hooks that you will be using a lot.

The hook useState is a function that takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state. If you tried to print the function useState() in the React dev tools ( console.log(useState) ), you will notice that it returns an array that contains the argument that you have put in the function useState and undefined where you will add a function to update the state.

The hook useState can be used when you want to change a text after clicking a button for example or creating a counter and etc.

Simple UseState examples

In order to use the hook useState , you will have to import it from the React package first.

Here is an example:

import React, { useState } from 'react'

Now you can start using the hook on your code without any problems. Have a look at the example below:

import React, { useState } from 'react'



function Component() {

const [name, setName] = useState('Mehdi')

}

Notice that we are using the ES6 array destructuring inside the component. So the variable name inside the array refers to the argument of the function useState (current state). On the other hand, the variable setName refers to the function that you will add to update the state. So this means we have a state named name and we can update it by calling on setName() function.

Let’s use it on the return statement:

import React, { useState } from 'react'



function Component() {

const [name, setName] = useState('Brad')



return <h1> My name is {name} </h1>

} //Returns: My name is Brad

Since function components don’t have the setState() function, you need to use the setName() function to update it. Here’s how you change the name from “Brad” to “John”:

import React, { useState } from 'react'



function Component() {

const [name, setName] = useState('Brad')



if(name === "Brad"){

setName("John")

}



return <h1> My name is {name} </h1>

} //Returns: My name is John

Multiple useState

When you have multiple states, you can call the useState hook as many times as you need.

Here is an example:

import React, { useState } from 'react'



function Component() {

const [name, setName] = useState('Alex')

const [age, setAge] = useState(15)

const [friends, setFriends] = useState(["Brad", "Mehdi"])



return <h1> My name is {name} and I'm {age} </h1>

//My name is Alex and I'm 15

}

Notice that, the hook receives all valid JavaScript data types such as string, number, boolean, array, and object.

Conclusion

The hook useState is one of the important and useful React hook that you must know. Moreover, this hook basically enables function components to have their own internal state and add features to them.

Thank you for reading this article, I hope you found it useful.

More Reading