In recent past, ReactJS has become really popular to an extent that almost all the frontend developers want to learn to use it. In React version 16.8 release, hooks were added and since then , working with React has become easier and fun as compared to when class-based components were the method to build an app with the library. In this article I will guide you through the basics of React useState() hook by making a simple counter application.

Getting Set Up

First and foremost, we have to set up our development environment by installing React. For this we will be using the Command Line Interface(CLI) create-react-app. We will run npm-create-react-app myapp . 'myapp' is the name of our app. After installation, change the directory to the 'myapp' folder by running cd myapp. Then to start the development server available at port 3000 we will run npm start .

After this we will remove the test files and everything in the App.js file as we don't need those.

Coding the counter app

First we will import the useState hook with the help of import React { useState } from "react" and app.css file with the help of import ./app.css . Then we create a function called 'App' and return a div containing an h1 tag as shown below:

import React, { useState } from "react";
import "./App.css";

const App = () => {
  return (
    <div>
      <h1>Counter App</h1>
    </div>
  );
};

export default App;

We need to export our App component using ES6 modules, that's why you can see export default app in the last line of the snippet. Now, you should have Counter App shown in an h1 tag in the browser.

To start building the counter app, we have to declare a state with our useState hook. This is normally done by declaring two variables, the state and another to update the state, setState, which is done by using array destructuring and initializing the state to 0.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <div className="title">
        <h1>Counter App</h1>
      </div>
    </div>
  );
};

export default App;

In React, there are always multiple ways of doing things, so you can also declare a variable above the App component, initialize it to 0, and pass it into the useState hook. With respect to the counter app, I have declared a count and setCount variable.

import React, { useState } from "react";
import "./App.css";

const initialState = 0;

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(initialState);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <span>{count}</span>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
};

export default App;

In the div we returned, we have to add two buttons, one for increasing the counter and the other for decreasing it, then wrap our count variable inside a span tag. You can use the p tag if you want, but I don’t want to get an extra line, so I’m going with span, which does not create an extra line because it is an inline element.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <div className="title">
        <h1>Counter App</h1>
      </div>
      <button>Decrease</button>
      <span>{count}</span>
      <button>Increase</button>
    </div>
  );
};

export default App;

To start increasing and decreasing the counter, we need to set up the functions to do that. This is done by passing an onClick function into the two buttons. We can execute the functions inline as shown below:

import React, { useState } from "react";
import "./App.css";

const initialState = 0;

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(initialState);

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default App;

Right before the return statement, React allows us to write pure JavaScript, so, we can pass the identifier into the onClick then write the functions before the return statement. I called the two functions handleIncrease and handleDecrease. This is cleaner and easier to read than executing the functions inline. And like I said earlier, there are always multiple ways of doing things in React. I want to show you the ways, so you can choose which works for you best.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  // Declare state and initialize it to 0
  const [count, setCount] = useState(0);

  const handleIncrease = () => {
    setCount(count + 1);
  };

  const handleDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <div className="title">
        <h1>Counter App</h1>
      </div>
      <button onClick={handleDecrease}>Decrease</button>
      <span>{count}</span>
      <button onClick={handleIncrease}>Increase</button>
    </div>
  );
};

export default App;

Now, things should be working correctly, so head over to the browser and start increasing and decreasing Yaay 🙌

Thank you so much for reading. If you find any errors, please let me know in the comment section. If you would like any other article on React too, let me know and I would start working on it right away.

Connect with me via Twitter