useReducer

Introduction

Feature	`useState`	`useReducer`
Complexity	Ideal for simple state logic	Suitable for complex state logic
State Updates	Directly set state via updater	Use a reducer function to determine state changes
Structure	Single piece of state	State + Dispatch + Reducer Function
Scalability	Can become messy with multiple states	Organizes updates into a single function

The useReducer hook is an alternative to useState for managing state in React functional components. It is particularly useful for complex state logic involving multiple sub-states or when the next state depends on the previous state.

With useState you have to define a state update function per each state variable. With useReducer, you use an independent reducer function to determine state changes. More on this later.

useState hold only a single piece of state, while useReducer defines the state, the dispatch and reducer function. A little more to worry about but simplifies things in complex states.

Last, with a complex state useState can become messy with multiple setState functions. Also, it is difficult to test the functionality of state change. With useReducer, all state changes are neatly organised into a single function.

useEffect

/

Example

      import React, { render, useState } from "react";

const CounterWithState = () => {
  const [count, setCount] = useState(0);
  const [word, setWord] = useState("");

  function changeHandler(e) {
    setWord(e.currentTarget.value);
    setCount(e.currentTarget.value.length);
  }
  
  function del() {
    if (word.length) {
      setWord(word.slice(0, -1));
      setCount(count - 1);
    }
  }
  
  function reset() {
    setWord("");
    setCount(0)
  }

  return (
    <div>
      <h1>Counter with useState</h1>
      <p>Letters: {count}</p>
      <input value={word} onChange={changeHandler} />
      <button onClick={del}>Delete</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

render(<CounterWithState />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

useReducer

/

Example

      import React, { render, useReducer } from "react";

type State = {
  word: string,
  count: number
}

type Action = 
  | { type: 'WORD', value: string }
  | { type: 'DELETE' }
  | { type: 'RESET' }
  
const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case "WORD":
      return { 
        count: action.value.length, 
        word: action.value 
      };
    case "DELETE":
      return state.word.length 
        ? { 
            count: state.count - 1, 
            word: state.word.slice(0, -1) 
          }
        : state;
    case "RESET":
      return { word: '', count: 0 };
    default:
      throw new Error("Action not handled");
  }
};

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

  return (
    <div>
      <h1>Counter with useState</h1>
      <p>Letters: {state.count}</p>
      <input 
        value={state.word} 
        onChange={(e) => {
          dispatch({ 
            type: 'WORD', 
            value: e.currentTarget.value
          })
        }} 
      />
      <button 
        onClick={() => dispatch({ type: 'DELETE' })}>
        Delete
      </button>
      <button 
        onClick={() => dispatch({ type: 'RESET' })}>
        Reset
      </button>
    </div>
  );
};

render(<CounterWithReducer />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

Let's convert the useState example to useReducer. We make sure everything is type safe and first we define the shape of our state, containing the word and count of its letters.

Then, we define all the actions we want our reducer to support. As you add more functionality, you add a new function name and shape of the passed parameters.

Then, we define the reducer, which accepts two parameters: the current state and the action being dispatched. The action contains two properties: the type or name of the action and the value, which is the payload of the action. Now, we onlyt have to implement a functionality for each action type, in our case ...

...changing the word and recalculating word length ...

... deleting the last letter ...

...resetting the word ...

... and also checking if we handled all the possible cases. Typescript is very helpful in this case, as dispatching a wrong action name shows compile time error.

The form now becomes much simpler. Firsr, we initialise the state and dispatch dispatch function using the useReducer hook.

Last, instead of calling setState, we dispatch the correct action identified by type with the required value.

useReducer

vs useState

Cleaner state management for complex logic.
Centralized state transitions in a single reducer function.
Easier to debug and test state logic.
Scalability when adding more actions or state properties.

Full Stack Development

useReducer

useReducer

Introduction

useEffect

Example

useReducer

Example

useReducer

vs useState