Hooks in React

A conventional ‘non-React’ website needs loading or re-loading of a page for updating its content. A React site, on the other hand, updates its contents dynamically without reloading, as if we are working with a smartphone app. This is possible with what is called as Hooks or states.

Let's build a simple incrementing/decrementing React app to understand hooks. Our app will display a number (initially 0) with a plus and minus button which will increase/decrease the displayed number dynamically.

Setting up

Run npx create-react-app my-app to create a react app named my-app. This will take time so have patience.

Once everything is installed, run cd my-app and then code . to open the folder in VSCode. At this stage, you can run npm start to start the server at localhost:3000 and it will show a rotating react logo in the browser - meaning the installation was successful and the server is running alright. Now that our react app is all set up, let’s make it our own.

Creating the front-end

I will be using tailwind, a CSS framework and google icons. For this the following CDNs have to be added in the head tag of index.html file in the public folder —

<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>

Now edit the App.js file in src folder as following —

import React from "react";
function App() {
return (
<div className="h-screen w-screen flex justify-around items-center text-6xl">
<div>
<button className="p-8 bg-gray-500 rounded-lg hover:bg-gray-600">
<span className="text-6xl material-icons">remove</span>
</button>
</div>
<div>
<h1>0</h1>
</div>
<div>
<button className="p-8 bg-gray-500 rounded-lg hover:bg-gray-600">
<span className="text-6xl material-icons">add</span>
</button>
</div>
</div>
);
}
export default App;

This simply adds two buttons and an h1 which will show the number. Let’s continue to the real part.

Adding hooks

After adding a hook which will keep track of the current number, our App.js file will look like this —

import React, { useState } from "react";
function App() {
const [number, setNumber] = useState(0);
const increase = () => {
setNumber((prevValue) => prevValue + 1);
};
const decrease = () => {
setNumber((prevValue) => prevValue - 1);
};
return (
<div className="h-screen w-screen flex justify-around items-center text-6xl">
<div>
<button
onClick={decrease}
className="p-8 bg-gray-500 rounded-lg hover:bg-gray-600"
>
<span className="text-6xl material-icons">remove</span>
</button>
</div>
<div>
<h1>{number}</h1>
</div>
<div>
<button
onClick={increase}
className="p-8 bg-gray-500 rounded-lg hover:bg-gray-600"
>
<span className="text-6xl material-icons">add</span>
</button>
</div>
</div>
);
}
export default App;

And our react app is done. Simply run npm start and you will be able to see it.

Explanation

We add a hook by using the useState function imported from react as shown above. There are two things associated with this state — a variable named number which stores the current number and a function setNumber which changes its value.

The increase/decrease button simply triggers the setNumber function to increase/decrease the previous value stored in the variable number.