Check out my React hooks introduction first, if you’re new to them.

One React hook I most often use is useState.

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 to access each individual item, like this: const [count, setCount] = useState(0)

Here’s a practical example:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

You can add as many useState() calls as 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).

Example on Codepen:

See the Pen React Hooks example #1 counter by Flavio Copes (@flaviocopes) on CodePen.

Lessons in this unit:

0:	Introduction
1:	Introduction to React Hooks
2:	▶︎ How to use the useState React hook
3:	useEffect React hook, how to use
4:	How to use the useContext React hook
5:	How to use the useReducer React hook
6:	How to use the useCallback React hook
7:	How to use the useMemo React hook
8:	How to use the useRef React hook
9:	Can I use React hooks inside a conditional?
10:	Why does useEffect run two times?
11:	Using useState with an object: how to update
12:	How to reference a DOM element in React