React Custom Hooks — Let’s implement our own useReducer

Let’s start

Manoj Singh Negi
Apr 20 · 3 min read

I am going to demonstrate all of this over a live stream on 24th of APRIL 2021, Sat at 10:30 AM IST here https://youtu.be/thZ4OjZtmfc

Let’s start right away. React custom hooks are designed to share functionality between components. Let’s learn them by example.

useReducer is a pre-defined hook provided by React itself. Sometimes handling complex states in useState is just not feasible.

useReducer is introduced to solve the exact problem. we can hold our state in the reducer and by dispatching actions we can control the state.

This post aims to write a useReducer hook and then instead of using React’s useReducer use our own in the application.

let’s start by using React’s useReducer in our code and then we will go on reverse engineering it.

In the above code, we are defining an initial value for our state.

In the 3rd line we are defining our reducer which listens for actions and according to that returns the desired state.

Now let’s move on to our component.

useReducer hook takes 3 arguments but the first two are commonly used.

First is the reducer function which is responsible for managing and updating our state.

The second is the initial value of our state.

The useReducer hook returns two values.

  1. State.
  2. Dispatch. The function for dispatching actions.

If you go on and click on the button to increment and decrement you will be able to see the value getting increased and decreased.

The component in action.

Whenever we click on the button it dispatches an action with type increment or decrement according to that the reducer updates the state and returns the updated state.

Now let’s move on to write our own implementation of useReducer.

We will start with defining the useReducer hook

Our custom hook takes the same arguments as a normal useReducer hook a reducer and state.

Right now it doesn’t do much let’s write some more code

Let me explain how useReducer hook flow works

  • We dispatch a function.
  • It goes and runs the reducer function.
  • The reducer takes in the previous state and action. According to action, it modifies the value and then returns the value.
  • The useReducer saves the value to pass in the next cycle and returns the value as well so it can be used inside our component.

To accomplish this, we have to save the state somewhere. That is why in the first line of our code we have used useState to keep track of the updating state and at the end, we return it as well. Right now our dispatch function is a dummy function.

The next step is to implement if we call dispatch it should call reducer and update the state.

Let’s write our dispatch function

Now let’s break it down.

  • We defined a function dispatch that takes action as an argument.
  • Next, it calls the reducer with the current state and action to obtain a new state according to the action provided.
  • In the end, we update the state and then use it inside our component.

Now let’s use our useReducer inside the component.

And if we run this in the browser voila it works the same as the useReducer provided by React.

This is my take on implementing useReducer. How would you go on about it?

You can also watch the youtube video. If that suits you better.

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer. Follow me on Twitter or Medium.

I am available to give a public talk or for a meet up hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article?

Please subscribe to my blog. You will receive articles like this one directly in your inbox frequently.

Peace.

recraftrelic

A group of creative and innovative People

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store