How to Use useReducer in React

State management is a crucial aspect of building interactive applications in React. While React's built-in useState hook is commonly used to manage state within components, more complex scenarios might require a different approach. This is where the useReducer hook comes into play. This hook provides a way to manage state by dispatching actions that describe state transitions. It offers a predictable pattern for handling state updates and can be particularly useful when dealing with complex state logic. Let's dive into the details of how to use useReducer effectively.

Syntax

The useReducer hook takes two arguments: a reducer function and an initial state value. Here's the basic syntax:

Copycopy code to clipboard
1const [state, dispatch] = useReducer(reducer, initialState);

The reducer function accepts the current state and an action as parameters and returns the new state based on the action type. The initialState argument represents the initial value of the state. The useReducer hook then returns an array with two values: state and dispatch. The state holds the current state value, while dispatch is a function used to trigger state updates by dispatching actions.

Example: Counter Component

Let's start with a simple example of a counter component to illustrate the usage of useReducer. We'll create a counter that increments or decrements a value based on different actions.

Copycopy code to clipboard
1import React, { useReducer } from 'react';
2
3const initialState = { count: 0 };
4
5const reducer = (state, action) => {
6  switch (action.type) {
7    case 'increment':
8      return { count: state.count + 1 };
9    case 'decrement':
10      return { count: state.count - 1 };
11    default:
12      throw new Error('Unsupported action type');
13  }
14};
15
16const Counter = () => {
17  const [state, dispatch] = useReducer(reducer, initialState);
18
19  return (
20    <div>
21      <p>Count: {state.count}</p>
22      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
23      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
24    </div>
25  );
26};
27
28export default Counter;

In this example, we define an initial state object with a count property set to 0. The reducer function handles the state transitions based on the dispatched action types. The Counter component renders the current count value and two buttons that trigger the respective actions.

Example: Form Input Component

The useReducer hook becomes especially useful when dealing with complex form inputs that require multiple state updates. Let's create a simple form input component that manages the state of an input field.

Copycopy code to clipboard
1import React, { useReducer } from 'react';
2
3const initialState = { value: '' };
4
5const reducer = (state, action) => {
6  switch (action.type) {
7    case 'update':
8      return { value: action.payload };
9    case 'reset':
10      return initialState;
11    default:
12      throw new Error('Unsupported action type');
13  }
14};
15
16const TextInput = () => {
17  const [state, dispatch] = useReducer(reducer, initialState);
18
19  const handleChange = (event) => {
20    const { value } = event.target;
21    dispatch({ type: 'update', payload: value });
22  };
23
24  const resetInput = () => {
25    dispatch({ type: 'reset' });
26  };
27
28  return (
29    <div>
30      <input type="text" value={state.value} onChange={handleChange} />
31      <button onClick={resetInput}>Reset</button>
32    </div>
33  );
34};
35
36export default TextInput;

In this example, we define an initial state object with an empty value property. The reducer function handles the state updates when the input value changes or when the reset button is clicked. The TextInput component renders an input field that reflects the current state value and a reset button that dispatches the 'reset' action.

Additionally

Remember that while useState is suitable for managing simpler state within components, useReducer shines when you need more control and structure over your state management. It allows you to handle complex state logic using a reducer function and dispatched actions.