A Guide to the useReducer Hook in React

With Code Example
August 18, 2023

Master Advanced State Management in React with the useReducer Hook

Series - React Hooks

Certainly! The useReducer hook is another important React Hook that is used for managing complex state logic in functional components. While the useState hook is great for managing simple state, useReducer is a more suitable choice when you have more advanced state management needs, such as when state transitions become intricate or when you need to manage multiple related pieces of state. It follows the same principles as the Redux library, helping you manage state transitions in a predictable and controlled manner. Let’s delve into how the useReducer hook works and explore some examples.

Syntax:

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

state: The current state of the component.
dispatch: A function used to send actions to the reducer.
reducer: A function that takes the current state and an action, and returns the new state.
initialState: The initial state of the component.

Counter with `useReducer`:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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 = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

In this example, the useReducer hook is used to manage a count state using the reducer function. The dispatch function sends actions to the reducer, which then updates the state based on the action type.

Form Input with Validation:

import React, { useReducer } from 'react';

const initialState = {
  username: '',
  password: '',
  isValid: false
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'inputChange':
      return {
        ...state,
        [action.field]: action.value,
        isValid: action.field === 'password' ? action.value.length >= 6 : state.isValid
      };
    default:
      return state;
  }
};

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

  return (
    <form>
      <input
        type="text"
        name="username"
        value={state.username}
        onChange={(e) => dispatch({ type: 'inputChange', field: 'username', value: e.target.value })}
      />
      <input
        type="password"
        name="password"
        value={state.password}
        onChange={(e) => dispatch({ type: 'inputChange', field: 'password', value: e.target.value })}
      />
      <p>{state.isValid ? 'Valid' : 'Invalid'}</p>
    </form>
  );
};

In this example, the useReducer hook is used to manage form input fields and validation. The reducer function handles changes to input fields and updates the state accordingly.

The useReducer hook is a versatile tool for managing more complex state logic, especially when state transitions involve multiple conditions and interactions. It helps you maintain a clear and predictable flow of data in your components.