What is state?

State is an object that is managed within your component.

When to useState?

Use state if you want a component to respond to changes.

When not to useState?

Don't use state if your component should not respond to changes.

The useState hook

const [ state, setState ] = useState()

Let's break it down

The useState hook is a function that returns an array with exactly two items. The first item in the array is the current state, while the second item is a function to update the current state.

The React hooks syntax relies heavily on the destructuring pattern. Another way to write this would be:

const stateHook = useState()
const state = stateHook[0]
const setState = stateHook[1]

Complete example

import React, { useState } from 'react'

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

    return (
        <div>
            <p>The current count is: { count }</p>
            <button onClick={() setCount(count + 1)}>+</button>
        </div>
    )
}