React Custom Hooks — Let’s implement our own useReducer
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.
- 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.
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.
Array Methods Explained: Filter vs Map vs Reduce vs Foreach
UPDATE: I have made a video about this topic you can watch it here https://youtu.be/tIfKxfRCVlY
I am available to give a public talk or for a meet up hit me up at email@example.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.