Learn the useState Hook by Building a Simple Project.

We are going to create a counter app from scratch. You can take a look at the final app [here](https://codesandbox.io/s/counter-app-pyqt1?file=/src/App.js).

Set up your React App so that we can start implementing Counter functionality. If you don't know how to set up and run the app, follow this [link](https://twitter.com/faheem_khan_dev/status/1517102063901196288?s=20&t=DkE8ptHJ5hRpk9prWOXgTg) to learn how to set up a React project.

Once React App is set up and running, navigate inside your src folder and look for App.js File. We will be editing App.js only. At this point, your App.js should look like as shown below. Delete all other extra code.

Now it's time to create the interface. We need to have an h1 tag to show the count value and three buttons

1. Increment button --> every click will increase the count by 1

2. Decrement --> every click will decrease the count by 1

3. Reset --> Reset the count value back to 0

At this point, we have the interface but it's all black and white 👿

Time to give some cool styling. We will write our CSS in the App.css file. So, go inside App.css. delete everything there and copy-paste the below code. It's just normal styling, don't care much about it.

Now our app's interface looks pretty. Have a look below -

Our app looks good but there is no functionality. Clicking buttons doesn't do anything.So let's start adding functionality to the app.

It should be obvious to you that we need a variable to store the count value and to show that on the screen (interface).

In React, the variables which are used to render the interface ( or anyhow being used to manipulate the user interface) are either something called props or state. These two are simple javaScript variables. More precisely, props are objects always but the state could be of any data type.

props are passed to components like function parameters. State are variables we declare and manage within our component.

So, Let's introduce a simple state variable that will hold the value of the counter to be shown on the screen. You might be wondering how to do this.

This useState hook is used to manage the state of a component.

It takes one argument, the initial value for the state variable, and returns an array of 2 values. 1st being the state variable and 2nd a function to update that state. When the state or prop of a component changes, React re-renders the component, and hence our interface is updated with the new value.

There are three changes

1. We have imported the useState so that we can use it.

2. Declaring the state variable --> we have used useState and passed 0 as initial value.

The returned array by useState is destructured and stored in count (the state variable) and setCount( to be used to update the count).

3. {count} in h1 tag to get the value of the count variable and show it on the screen. it shows 0, the initial value.

All set, time to listen to a click event on all 3 buttons.In React onclick is written as onClick(camelcase)

Let's add onClick on buttons & write corresponding click event handler functions.

We have added the onClick and corresponding function but they don't do anything yet.To update state var, we need to call setCount() and pass the updated value.

for increment -> setCount(count+1)

for decrement -> setCount(count - 1)

To reset -> setCount(0)

That's all. Your counter app should run as expected.

Hope you enjoyed this show and learned something new from this. If you have got any doubts reach out to me on Twitter (https://twitter.com/faheem_khan_dev).