# How to use the useState React hook
> Learn how the useState React hook adds state to a function component, returning the current value and an updater function via array destructuring.
Author: Flavio Copes | Published: 2019-07-17 | Canonical: https://flaviocopes.com/react-hook-usestate/
> Check out my [React hooks introduction](https://flaviocopes.com/react-hooks/) first, if you're new to them.
One [React](https://flaviocopes.com/react/) hook I most often use is `useState`.
```js
import React, { useState } from 'react'
```
Using the `useState()` API, you can create a new state variable, and have a way to alter it. `useState()` accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state. Since it returns an array we use [array destructuring](https://flaviocopes.com/es6/#destructuring-assignments) to access each individual item, like this: `const [count, setCount] = useState(0)`
Here's a practical example:
```js
import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
You clicked {count} times
)
}
ReactDOM.render(, document.getElementById('app'))
```
You can add as many `useState()` calls you want, to create as many state variables as you want. Just make sure you call it in the top level of a component (not in an `if` or in any other block).
Not sure if `useState` is the right hook for your case? My free [React hook chooser](https://flaviocopes.com/tools/react-hook-chooser/) helps you pick the right one.
Example on Codepen: