Michael Ibinola
Building a Simple Counter Application in React using Custom Hooks (useReducer)

Building a Simple Counter Application in React using Custom Hooks (useReducer)

Michael Ibinola's photo
Michael Ibinola
·

3 min read

React is a popular JavaScript library for building user interfaces. One of the key features of React is its ability to use hooks, which allow developers to use state and other React features without writing a class component. In this tutorial, we'll be building a simple counter application in React using a custom hook called "useReducer" which can handle complex state changes.

Before we begin, let's make sure that you have a basic understanding of React, hooks, and functional components. If you're new to React, I would recommend starting with the official React documentation before continuing with this tutorial.

First, we'll start by creating a new React application using Create React App (CRA). If you don't have CRA installed on your system, you can install it by running the following command:

npm install -g create-react-app

Now that you have React installed, you can create a new application by running the following command:

create-react-app counter-app

This will create a new folder called "counter-app" that contains the basic structure of a React application. Go ahead and navigate into the folder:

cd counter-app

Next, we'll create a new file called "useCounter.js" in the "src" folder. This file will contain our custom hook that handles the state of our counter. Inside the file, we'll start by importing the useReducer hook from React:

import { useReducer } from 'react';

Next, we'll define our custom hook called "useCounter". The useReducer hook takes two arguments: the reducer function and the initial state. The reducer function takes in the current state and an action and returns the new state based on the action.

export default function useCounter(initialCount) {
  const [count, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'increment':
        return state + 1;
      case 'decrement':
        return state - 1;
      case 'reset':
        return initialCount;
      default:
        return state;
    }
  }, initialCount);
  return [count, dispatch];
}

In this hook, we have 3 actions "increment", "decrement" and "reset" which correspond to increasing, decreasing, and resetting the state.

Now that we have our custom hook defined, we can go ahead and use it in our component. Open the "src/App.js" file and replace the contents of the file with the following code:

import React from 'react';
import useCounter from './useCounter';

function App() {
  const [count, dispatch] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

export default App;

Run this on your browser and Viola, we have a simple implementation of a counter application using useReducer.

Hey was this helpful? Please do leave a comment and a like below so others can find this post 🙂

You can find me: My LinkedIn & GitHub

ReactHooks