useReducer() Hook in React JS – Example & Explanation

useReducer() Hook in React JS – Example & Explanation

The useReducer() hook is an alternative to useState() for managing complex state logic in React functional components. It’s useful when:

• State changes depend on previous state
• Multiple state values need to be updated together
• State management logic is complex

Basic Syntax of useReducer()

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

• state → Holds the current state.
• dispatch → Function to update state by sending an action.
• reducerFunction → Defines how the state updates based on actions.
• initialState → The default value of state.

Example: Counter with useReducer()

We’ll create a simple counter app where:

? + button increases the count

? - button decreases the count

? Reset button resets the count

1. Create Counter.js

import React, { useReducer } from "react";

// Step 1: Define Initial State

const initialState = { count: 0 };

// Step 2: Define Reducer Function

const reducer = (state, action) => {

switch (action.type) {

case "INCREMENT":

return { count: state.count + 1 };

case "DECREMENT":

return { count: state.count - 1 };

case "RESET":

return initialState;

default:

return state;

}

};

function Counter() {

// Step 3: Use useReducer Hook

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

return (

<div>

<h2>Counter: {state.count}</h2>

<button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>

<button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>

<button onClick={() => dispatch({ type: "RESET" })}>Reset</button>

</div>

);

}

export default Counter;

2. Use Counter in App.js

import React from "react";

import Counter from "./Counter";

function App() {

return (

<div>

<h1>React useReducer Hook Example</h1>

<Counter />

</div>

);

}

export default App;

How It Works

1. Initial State → count: 0
2. Reducer Function (reducer) → Handles actions (INCREMENT, DECREMENT, RESET).
3. dispatch() Calls Reducer → Updates state based on action type.
4. State Updates & UI Rerenders → The count updates when buttons are clicked.