React useReducer Hook

Posted on In

React useReducer hook

useReducer

In React, the useReducer hook is used to manage complex state logic with a reducer function. Here’s an example of how you can use useReducer to manage state in a simple counter application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { useReducer } from 'react';

// Reducer function takes the current state and an action, returns a new state
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  // useReducer returns the current state and a dispatch function to dispatch actions
  const [state, dispatch] = useReducer(reducer, { 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, the reducer function defines how the state should be updated based on different action types. The useReducer hook takes the reducer function and an initial state object as arguments and returns the current state and a dispatch function. The dispatch function is used to send actions to the reducer, which then updates the state accordingly.

The Counter component demonstrates how to use the useReducer hook. It maintains a count state and provides buttons to increment and decrement the count. When you click the buttons, it dispatches actions of type 'INCREMENT' and 'DECREMENT', causing the reducer to update the state and re-render the component with the new state value.

Difference between useState and useReducer

useState and useReducer are both hooks provided by React to manage state in functional components, but they serve different purposes and are suited for different scenarios.

useState:

  • useState is a simpler and more straightforward hook used for managing local component state.
  • It is best suited for independent, isolated state updates within a component.
  • You can use useState when you have a single piece of state that needs to be updated independently of other state values.
  • Example usage: managing a boolean flag, input field value, or any other simple state variable within a component.

useReducer:

  • useReducer is more advanced and flexible. It is useful when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.
  • It is especially helpful when dealing with state transitions in a predictable way, such as form validation, dynamic form fields, or complex UI components.
  • useReducer is also beneficial when multiple actions need to be handled by a single reducer function.
  • It provides a clear separation between updating state and the logic for updating state, which can lead to more maintainable code as your state logic grows.

References: