What are Hooks?

Hooks were introduced in React 16.8 and have made development easier since then. They allow functional components to use various React features like state and lifecycle methods. This makes code cleaner and easily understandable.

Hooks Rulebook

Hooks rulebook is pretty small, as it has only 3 rules that you should always keep in mind.

Only call Hooks at the Top Level.
Never call them inside regular JS functions.
Call Hooks only inside React functions or Custom Hooks.

React Hooks

React provides us with 10 super useful hooks. In this series, we'll be exploring all of them by building fun little projects. We will also understand Custom Hooks at the end of this series.

Let's start with useState()

useState()

Introduction

useState is one of the basic hooks and is veryyyy important. It is used to store and track states.

"states" are nothing but a component's current information - it can be its data or its properties, basically anything that is related to that component.

Implementation

Let's understand how to use this hook in development. We'll be making a simple counter application for this.

Concept

The concept of this application is simple. It will have:

Counter: to display the count.
"+" Button: increases the count.
"-" Button: decreases the count.
"Reset" Button: resets counter to 0.

Development

To set up a new React app, run the following commands

npx create-react-app your-app-name
cd your-app-name
npm start

or you can use CodeSandbox - an online code editor.

First and foremost thing to do before writing anything is to import the hook in our component (here App.js).

import { useState } from "react";

Now we will call useState() and initialize our state variable - counter.

Keeping in mind the 3 rules of Hooks Rulebook, we define our state like this, inside our React function and at the Top Level.

const[counter,setCounter] = useState(0);

As we see, useState() returns 2 values : state variable and a function to update that variable. We store these two values in elements of a destructured array: counter and setCounter respectively.

And, we initialize the "counter" with a default value of 0, which is passed in the useState() as an argument.

Now on to the fun part!

We will make a web app to display the counter.

 return (
    <div className="App">
      <h1>{counter}</h1>
      <button onClick={() => setCounter(counter - 1)}> - </button>
      <button onClick={() => setCounter(0)}> Reset </button>
      <button onClick={() => setCounter(counter + 1)}> + </button>
    </div>
  );

This is a very basic counter. Here inside the h1 tags, we are displaying the counter value, using { }. These braces are used to display variables inside JSX.

<h1>{counter}</h1>

Next are the buttons, and here lie all the functionalities of this application. So, as we know when a certain button is clicked it will either increase or decrease the counter value by 1 or reset the counter to 0.

As we know, to change or update the state, we must make use of the setter function - here setCounter(). The argument of this function will be the modification needs to be done on the state of the variable ( counter ).

Therefore, when "+" is clicked counter will be equal to counter + 1. When "-" is clicked counter will be equal to counter - 1. When "Reset" is clicked counter will be equal to counter = 0.

<button onClick={() => setCounter(counter - 1)}> - </button>
<button onClick={() => setCounter(0)}> Reset </button>
<button onClick={() => setCounter(counter + 1)}> + </button>

Here is the full code:

import { useState } from "react";
export default function App() {
  const[counter,setCounter] = useState(0);
  return (
    <div className="App">
      <h1>{counter}</h1>
      <button onClick={() => setCounter(counter - 1)}> - </button>
      <button onClick={() => setCounter(0)}> Reset </button>
      <button onClick={() => setCounter(counter + 1)}> + </button>
    </div>
  );
}

This completes our counter application. 🥳

Conclusion

Hope this example made the useState Hook a little easy for you. I've not added any styling to this application in order to keep this tutorial simple, but feel free to customize this application as you like! 🥰

useState(): Understanding the Hook with Counter Application

Table of contents