Multiple useReducer Hook in React

In this article, we will show you how to use the multiple useReducer Hook in React. In the previous two articles, we learned about the use of the useReducer.

Today we will take a counter example from the previous article and use the useReducer for multiple purposes. We’ll create the following user interface for demo.

Output - Multiple useReducer Hook in React - Clue Mediator
Output – Multiple useReducer Hook in React – Clue Mediator

Use multiple useReducer Hook in React

  1. Create a react application
  2. Implement counter example
  3. Use multiple useReducer
  4. Output

1. Create a react application

Let’s create a startup react application using the create-react-app package. Run the following command to create a react app.

2. Implement counter example

We have to implement the simple counter example using the useReducer Hook. Refer to the following link for the implementation.

Example of the useReducer Hook

3. Use multiple useReducer

In this step, we will use the same reducer function for multiple counters. We don’t need to initialize the different states for the second counter. All useReducer hooks will behave as individual states.

In the following code, we have added another counter using the same reducer function and initial state.

App.js

4. Output

Run the react app and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Github Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *