What is useState hook and how do you use it?

According to React documentation, "hooks are special functions which enable one use state and other React features without writing ES6 classes." There are a number of hooks which are part of the React Hooks API. Below are some of the most commonly used hooks.
Basic Hooks

• usestate
• useEffect
• useContext

Advanced Hooks

• useReducer
• useCallback
• useMemo
• useRef

This post will primarily focus on the basic useState hook.

useStatehook is a special function which takes one argument. The argument passed to useState is initial state. It returns an array of two entries. The first element is the initial state and the second is a function which is used for updating state.
It should be noted that unlike class components, state doesn't have to be an object. It can be a string, number, array, boolean or an object.

const [state, setState] = useState(initialState); 

const [state, setState] is array destructuring used for unpacking elements of the array returned by useState. If you are not familiar with destructuring, you can read about it at MDN. You can give them meaningful names instead of state and setState for readability.

useState also provides an option of passing a function as an argument if the initial state has to be computed. The value returned by the function is set as initial state. In the code below i am passing a function which returns a random integer between 0 and 100 (including 0, excluding 100).

const[count, setRandomCount] = useState(function generateRandomInteger(){
   return Math.floor(Math.random() * 100);
})

The function doesn't have to be named like i did above. You can pass an anonymous function as well, though i think a named function is better because it communicates to the reader of your code the purpose of the function.

setRandomCount is used for updating state just like this.setState in class components with one fundamental difference. Unlike class components, it replaces current state with argument passed to setRandomCount. For example if the value of count is 50 at first render, calling setRandomCount(10) will change the value of count to 10.

You could be wondering how to update state if it is an object. You can merge current state with changes you want to effect manually using spread syntax. You can read more about use of spread syntax for updating state at React Hooks FAQ.

The code below illustrates a simple use case of useState.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App(props) {
  const [count, setRandomCount] = useState(function generateRandomInteger() {
    return Math.floor(Math.random() * 100);
  });
  function clickHandler(e) {
    setRandomCount(Math.floor(Math.random() * 100));
  }
  return (
    <div>
      <h1> {count} </h1>
      <p>
        <button onClick={clickHandler}> Click </button>
      </p>
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

NOTE: Unlike in class components, you don't need this when using value of state or when assigning event handlers.

REFERENCE
React Hooks Reference