If you’re new to learning React, or you’re switching from class-based to functional components, you may come across “Hooks”. But what are React Hooks, and what are they used for?

The way I look at React Hooks are that they are a way to tap into, or hook into “states” of a component in React.

What is a “state” in React?

Think of states like conditions. For instance, you could say: “The state of the weather is cold today.” Make sense?

Example of using hooks in React

Let’s say you have an e-commerce store, and the current state of selected clothing items is 0. This makes sense, because you haven’t selected how many items you want yet.

You can use a hook, so that way, if the “plus” icon is clicked, one more clothing item will be added to the cart, and if the “minus” icon is clicked, one item will be removed. For this case we will be using the hook useState() to change the state of our component.

Here is how the code would look for a feature like this:

function Products() {
  // Create new state variables, which we'll call "shoeCount", to tell us how many shoes are added to the cart
  const[shoeCount, setshoeCount] = useState(0)
// The current state, or amount of shoes in the cart, is 0
  return (
    <div>
      <img src='photo.img' />
      <p>Nike Shoes</p>
      <p>You have {shoeCount} shoes in your cart.</p>
      <div className="plus-button">
      <button onClick={() => setshoeCount(shoeCount + 1)}>
        +
      </button>
      </div>
      <div className="minus-button">
      <button onClick={() => setshoeCount(shoeCount - 1)}>
        -
      </button>
      </div>
    </div>
  );
}

Hooks are what are in the brackets. So in our above example, the setshoeCount

 {() => setshoeCount(shoeCount - 1)}

means that when this button is clicked, whatever the amount of shoes in the cart is, either add one or subtract one. And of course, the parentheses () call the function.

And the hook is:

useState(0)

meaning that the current state is 0. This component is immutable, meaning that it can be changed.

Normally when you see const, you may think to Vanilla JS, where normally a const variable should not be changed because it’s constant. But because we are using hooks, the state of this element can now be changed!

Other examples of React Hooks

Here are a few other examples of React Hooks (I added ones that you would probably use the most):

• useState()
• useEffect()
• useReducer()

Pro tip: Just like anything else in programming, when it comes to Hooks, you don’t need to remember every hook. Just the above three are fine, and the rest you can look up.

So, React Hooks are a great way to deal with the state, or condition of elements that you are working with in React.

Product of the Day: Canva Email Signature Template. If you’re a web developer or designer looking for a professional email signature, try this template out! No code is needed, and you can edit right on Canva. Our newest email signature template is ready to go. Here’s the link.

Other recommended articles for developers:

Create multiple CSS elements with the same style

For designers:

What is the UX Design process?

For business owners:

How to improve website accessibility