What is Reacts useState hook? 4 common examples you'll need to know
Tags: react, beginners, javascript, codenewbie
Published: 2020-08-24 10:41:06

---
title: What is Reacts useState hook? 4 common examples you'll need to know
published: true
description: "You might have heard a lot about React hooks, particularly the useState hook. But what is it? In this article, we look at an overview of the useState hook, and 4 common examples of when you'll use it" 
tags:  
 - react
 - beginners
 - javascript
 - codenewbie
canonical_url: https://jschris.com/what-is-the-usestate-hook-with-examples
---

*Originally posted at [jschris.com](www.jschris.com)*

## What is the useState hook?

Before we get into it, its a good idea to have a look what the useState hook is. In a nutshell:

> the useState hooks lets us store "state" as data, which our functional components can use

In other words, when you have things that can change on your UI, you can store it in state. React then "reacts" and rerenders your components when the state changes. Cool right? The useState hook looks like this:

```jsx
const [number, setNumber] = useState(5);
```

The useState "hook" is just a function call:

```jsx
useState(5);
```

This function gives us back an array. We use **array destructuring** to get 2 things out of the array:

- A variable that holds the current value of the state object (in this case, it's called `number`)
- A function that lets us update the state variable (in this case, its called `setNumber`)

I've called these things `number` and `setNumber` but you can name them whatever you want. It's a good idea to name them similar to what they represent, and the function to update the state value should be prefixed with "set" like so:

```jsx
const [name, setName] = useState('Chris');
const [age, setAge] = useState(28);
```

You may notice I am passing some values ("Chris" and the number 28) to these state objects. This is how we set an **initial state**. This is optional, you don't have to set an initial state if you don't want to.

Once we've setup state, we can change the state value using the setter function like so:

```jsx
const [name, setName] = useState('Chris');
const [age, setAge] = useState(28);

setName('Chris McNew Name');
setAge(29);
```

This will update our state values, causing React to rerender our components with the new values.

We can store a number of different things in state, depending on how you want to represent the data on your UI:

- Strings
- Numbers
- Booleans
- Objects
- Arrays

Now that we've learned what is the useState hook is, let's look at 5 common examples you'll need to know when using the useState hook!

## 1. Showing/hiding things

Number 1 on our list is showing and hiding things. This can be a range of things:

- Showing and hiding a modal
- Showing a loading spinner
- Toggling the display of a component

Let's look at an example where if the user clicks a button, the text "This text will show" will appear on the page:

```jsx
import React, { useState } from 'react';

export default function App() {
	const [showText, setShowText] = useState(false);

	return (
		<div className='App'>
			<button onClick={() => setShowText(!showText)}>Toggle Text</button>

			{showText && <div>This text will show!</div>}
		</div>
	);
}
```

We have a state object:

```jsx
const [showText, setShowText] = useState(false);
```

This is to indicate wether the text should show or not. In other words, this holds the **state of the text**, which will either be shown/or hidden.

We then have some logic around the component we want to show based on this:

```jsx
{
	showText && <div>This text will show!</div>;
}
```

This basically reads as **if showText is true, render the JSX**. So since `showText` is initally false, the text won't appear. If you initialised the `showText` state object to be `true`, the text would appear.

Having to manually change code to show and hide the text isn't the best user experience, so let's look at how we can show/hide this component using a button click. When the button is clicked, it will change the state to the opposite of what it was previously:

```jsx
<button onClick={() => setShowText(!showText)}>Toggle Text</button>
```

Notice we use the `setShowText` function along with a lovely inline arrow function to change the state when the button is clicked. This sets it to the opposite of what it currently is. When this changes, the component rerenders, and displays the text based on the new `showText` value.

## 2. Conditional Rendering

Similar to showing and hiding things, we can **conditionally render** based on a state value. Lets take the example of a logged in user. If a user goes to our app who isn't logged in, we want to show them the "Sign in" screen. If they are logged in, we want to show them the "Dashboard":

```jsx
import React, { useState } from 'react';

function SignInScreen() {
	return <div>Please login!</div>;
}

function DashboardScreen() {
	return <div>Hello! Welcome to your dashboard</div>;
}

export default function App() {
	const [isLoggedIn, setIsLoggedIn] = useState(false);

	return <div className='App'>{isLoggedIn ? <DashboardScreen /> : <SignInScreen />}</div>;
}
```

Firstly, we store a value called `isLoggedIn` in state. This tells us if the user is logged in or not. Next, we use the **ternary operator** to decide which component to render:

```jsx
isLoggedIn ? <DashboardScreen /> : <SignInScreen />;
```

This means "if logged in is **true**, show the **DashboardScreen** component. Else, show the **SignInScreen** component.

In a fully fledged app, the "SignInScreen" component would do some stuff to log the user in and then change the `isLoggedIn` state value to true. This would rerender the component **App** component and the user will be shown the Dashboard. Hurray!

## 3. Holding a list of data

Quite often you'll need to display a list of data in your app (did someone say TODO LIST?). To do this, you can store the list in state, and render each item in the list as a component:

```jsx
import React, { useState } from 'react';

export default function App() {
	const [todos, setTodos] = useState([
		{ description: 'First thing on the list', isComplete: false },
		{ description: 'Second thing on the list', isComplete: false },
		{ description: 'Last thing todo', isComplete: false },
	]);

	return (
		<>
			{todos.map((todo) => (
				<div>
					Description:
					{todo.description} - Completed:
					{todo.isComplete.toString()}
				</div>
			))}
		</>
	);
}
```

Notice how we initialised the state value with our data - in this case it's an array of objects. Each object holds some information about a Todo item - the items description and whether the item is completed or not.

We then use the **map** function to iterate over the `todos` state object and display the description and whether it is completed or not to the screen.

Since we stored this data in state, if the list changes in any way, such as if we removed or added an item, this would trigger a state change and update the component with the new list.

## 4. Holding form values

Working with forms can be a pain, luckily for us using React hooks makes it easier. Let's say we have a simple login form, when the user logs in and alert pops up showing the information they enter. OK so I never said it was a very good login form. Anyways...

```jsx
import React, { useState } from 'react';

export default function App() {
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");

	const handleFormSubmit = () => {
		alert(`username is ${username}, password is ${password}`);
	};

	return (
		<>
			<form onSubmit={handleFormSubmit}>
				Username:
				<input value={username} onChange={(e) => setUsername(e.target.value)} />
				Password:
				<input value={password} onChange={(e) => setPassword(e.target.value)} />
				<button type='submit'>Submit</button>
			</form>
		</>
	);
}
```

Our form has 2 values, each of which has their own **state value**. Whenever the user types into a form field, we change the state value for that form field. Since we have quick access to the form field values, we can perform other logic easily, such as validation in the handleFormSubmit function:

```jsx
const handleFormSubmit = () => {
	if (!username || !password) {
		alert(`Please enter a username and password!`);
	}
};
```

## Want to try putting these ideas into action?

Why not try building some React projects to boost your learning even further? I send out project ideas every few weeks(ish) with project ideas, starter code, and tips. [Subscribe to get this straight to your inbox!](https://subscribe.jschris.com)