React useState Hook

React hooks are a relatively new addition to the library. One of these hooks, the useState hook, allows you to access state in a component while eliminating the need to use a class component.

This allows you to write less code, as you no longer have to inherit from React.Component, and you can write a simple JavaScript function. First, you’ll have to import the useState function from react.

import React, { useState } from React

The useState hook takes in a value, and it returns an array. The first index of that array contains the state value that you passed in, and the second index of that array contains a function used to update that state value. Updating state using this function causes the component to re-render, just like with using class hooks.

You can use destructuring to easily assign your state value and your update function to their own variables like so:

function LikeButton(){
     const [likes, setLikes] = useState(0);
}

It is convention to name the ‘setter’ function set(variable name). We can now easily use this function to update our state and re-render our component!

function LikeButton(){
     const [likes, setLikes] = useState(0);
     return(
         <div>
              <h3>Likes:{likes}</h3>
              <button onClick={() => setLikes(likes + 1)}>
                   Like Me!
              </button>
         </div>
     )
}