Easy To Understand React UseReducer Hook | Updated 2025

Understanding the Purpose and Implementation of the React useReducer Hook

CyberSecurity Framework and Implementation article ACTE

About author

Ravi Shankar (React developer )

Ravi Shankar is a well-known React developer and educator. With years of experience working on real-world React projects, Ravi has helped developers build high-quality applications across various industries. He is best known for creating in-depth courses and guiding learners step-by-step through React concepts, from beginner to advanced levels.

Last updated on 12th Jun 2025| 9625

(5.0) | 48741 Ratings

Introduction

React usereducer hook is a powerful tool for managing state, especially in complex components with multiple state transitions. While the useState() hook is great for managing simple state in functional components, React usereducer hook shines when dealing with more intricate state logic or when the state depends on previous values. In this post, we’ll explore the purpose of React usereducer hook, when to use it, and how to implement it effectively with practical examples. You’ll learn how this React usereducer hook provides a more structured and scalable approach to managing state in React, and how it compares to useState().


Do You Want to Learn More About Business Analyst? Get Info From Our Business Analyst Training Today!


What is the React usereducer hook?

The useReducer() hook is a part of React’s Hooks API and provides an alternative to useState() for state management. It is typically used for handling complex state logic or when a component’s state relies on multiple sub-values or requires transitions between different states. useReducer() works similarly to how Redux operates by utilizing a reducer function to manage state changes. Instead of directly updating the state with a setter function like useState(), you dispatch actions that the reducer function processes to update the state. The syntax for using useReducer() is: const [state, dispatch] = useReducer(reducer, initialState);

The syntax for using useReducer() is:

const [state, dispatch] = useReducer(reducer, initialState);

  • reducer: A function that specifies how the state should change based on the action dispatched.
  • initialState: The initial state value.
  • state: The current state value.
  • dispatch: A function used to send an action to the reducer.

    Subscribe For Free Demo

    [custom_views_post_title]

    When to Use useReducer()

    useReducer() is a more advanced hook compared to useState(), and is typically used in the following scenarios:

    • Complex State Logic: When state transitions are complex and involve multiple sub-values.
    • State Depends on Previous State: If the state change depends on the previous state, usereducer react can be a cleaner option than chaining state updates in useState().
    • Multiple State Updates: When you need to update multiple pieces of state in response to a single action.
    • Shared State Across Components: When multiple components share a piece of state or logic, useReducer() makes managing that state more predictable.
    • Managing Forms and Complex Interactions: For forms with multiple fields or more advanced interactions, usereducer react helps maintain a consistent structure.

    If you’re working on a component with a simple piece of state, useState() is usually sufficient. But for more complicated scenarios, useReducer() provides a structured, predictable way to manage state.


    Would You Like to Know More About Business Analyst? Sign Up For Our Business Analyst Training Now!


    Basic Structure of useReducer()

    To understand how usereducer in react works, let’s first take a look at its basic structure.

    Reducer Function

    A reducer function is where you define how the state should change based on an action. It typically takes two arguments: the current state and the action.

    • function reducer(state, action) {
    • switch (action.type) {
    • case ‘increment’:
    • return { count: state.count + 1 };
    • case ‘decrement’:
    • return { count: state.count – 1 };
    • default:
    • return state;
    • }
    • }
    • state: The current state of the component.
    • action: The action object dispatched to the reducer, usually containing a type property.
    useHook

    Using useReducer() Hook

    const [state, dispatch] = useReducer(reducer, { count: 0 });

    • state: Holds the current state ({ count: 0 } in this case).
    • dispatch: Function used to dispatch actions (e.g., dispatch({ type: ‘increment’ })).
    Course Curriculum

    Develop Your Skills with Business Analyst Training

    Weekday / Weekend BatchesSee Batch Details

    Implementing usereducer in React

    Now, let’s look at how useReducer() can be used in practice with a few examples.

    Simple Counter Example

    In this example, we’ll create a simple counter application where users can increment or decrement the count.

    • import React, { useReducer } from ‘react’;
    • function counterReducer(state, action) {
    • switch (action.type) {
    • case ‘increment’:
    • return { count: state.count + 1 };
    • case ‘decrement’:
    • return { count: state.count – 1 };
    • default:
    • return state;
    • }
    • }
    • function Counter() {
    • const [state, dispatch] = useReducer(counterReducer, { count: 0 });
    • return (
    • <div>
    • <p>Count: {state.count}</p>
    • <button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>
    • <button onClick={() => dispatch({ type: ‘decrement’ })}>Decrement</button>
    • </div>
    • );
    • }
    • export default Counter;

    In this example:

    • We define a counterReducer function that handles the actions (increment and decrement).
    • We use useReducer() to manage the state (count) and dispatch actions to update it.
    • The dispatch() function is called with an action object that tells the reducer how to update the state.

    Form Handling with useReducer()

    useReducer() can also be very useful for managing form state, especially when the form has multiple fields that need to be updated independently.

    • import React, { useReducer } from ‘react’;
    • function formReducer(state, action) {
    • switch (action.type) {
    • case ‘update_field’:
    • return { …state, [action.field]: action.value };
    • case ‘reset’:
    • return { name: ”, email: ” };
    • default:
    • return state;
    • }
    • }
    • function Form() {
    • const [state, dispatch] = useReducer(formReducer, { name: ”, email: ” });
    • const handleChange = (e) => {
    • const { name, value } = e.target;
    • dispatch({ type: ‘update_field’, field: name, value });
    • };
    • const handleSubmit = (e) => {
    • e.preventDefault();
    • console.log(state);
    • dispatch({ type: ‘reset’ });
    • };
    • return (
    • <form onSubmit={handleSubmit}>
    • <div>
    • <label>Name:</label>
    • <input
    • type=”text”
    • name=”name”
    • value={state.name}
    • onChange={handleChange}
    • />
    • </div>
    • <div>
    • <label>Email:</label>
    • <input
    • type=”email”
    • name=”email”
    • value={state.email}
    • onChange={handleChange}
    • />
    • </div>
    • <button type=”submit”>Submit</button>
    • </form>
    • );
    • }
    • export default Form;

    In this example:

    • We manage the form’s state using useReducer() and dispatch actions to update individual fields.
    • The handleChange function dispatches the update_field action whenever an input field is changed.
    • The handleSubmit function logs the state and resets the form using the reset action.

    Complex State Management Example

    For more complex state management, useReducer() becomes even more useful. Here’s an example that handles multiple properties in the state and multiple actions.

    • const toggleTodo = (id) => {
    • dispatch({ type: ‘toggle_todo’, payload: id });
    • };
    • return (
    • <div>
    • <button onClick={() => addTodo(‘Learn React’)}>Add Todo</button>
    • <ul>
    • {state.todos.map((todo) => (
    • <li key={todo.id}>
    • <span
    • onClick={() => toggleTodo(todo.id)}
    • style={{ textDecoration: todo.completed ? ‘line-through’ : ‘none’ }}
    • >
    • {todo.text}
    • </span>
    • <button onClick={() => removeTodo(todo.id)}>Remove</button>
    • </li>
    • ))}
    • </ul>
    • </div>
    • );
    • export default TodoApp;

    In this example:

    • We manage an array of todos and provide actions to add, remove, or toggle the completed status of a todo item.
    • The todoReducer processes these actions, making the state updates predictable and easy to follow.

    Looking to Master Business Intelligence? Discover the Business Intelligence Master Program Training Course Available at ACTE Now!


    Advantages of Using useReducer()

    • Better for Complex Logic: It’s easier to handle complex state changes and interactions with useReducer() compared to useState().
    • Predictable State Updates: Since the state transitions are handled in one place (the reducer), it’s easier to follow and debug.
    • Scalable: As your application grows, useReducer() scales better than useState() when dealing with multiple state variables or actions.
    Business Analyst Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

    When Not to Use react native usereducer

    While useReducer() is powerful, it’s not always necessary. For simpler state management, useState() may be more appropriate and easier to work with. Use useReducer() when you have:

    • Multiple state transitions.
    • Complex state logic.
    • State that depends on other pieces of state.

    Want to Learn About Business Analyst? Explore Our Business Analyst Interview Questions and Answers Featuring the Most Frequently Asked Questions in Job Interviews.


    Best Practices for react native usereducer

    • Keep Reducer Functions Pure: Avoid side effects in the reducer. It should only return the new state based on the current state and action.
    • Use Action Constants: Instead of using string literals for action types, define them as constants to avoid errors due to typos.
    • Avoid Overusing useReducer(): For simple state, useState() might be easier to manage. Don’t overcomplicate things with useReducer() when it’s unnecessary.
      • Conclusion

        react native usereducer is a valuable tool for managing state, especially for complex applications with intricate state logic. It allows you to structure and centralize your state management, making your code more predictable, easier to debug, and scalable. While it may seem more complex than useState(), it offers greater control over state transitions, making it ideal for managing multiple or complex state values. With the examples and best practices shared in this guide, you’re ready to start implementing useReducer() in your own React applications!

    Upcoming Batches

    Name Date Details
    Business Analyst Online Training

    07-July-2025

    (Weekdays) Weekdays Regular

    View Details
    Business Analyst Online Training

    09-July-2025

    (Weekdays) Weekdays Regular

    View Details
    Business Analyst Online Training

    12-July-2025

    (Weekends) Weekend Regular

    View Details
    Business Analyst Online Training

    13-July-2025

    (Weekends) Weekend Fasttrack

    View Details