React useReducer Hook

⚙️ React `useReducer` Hook

The useReducer Hook is an alternative to useState — useful when you have complex state logic or when multiple states depend on each other.

It is commonly used for:

✔ Large or multi-step state updates
✔ Forms
✔ State management patterns (Redux style logic)
✔ Sharing state with Context

🧠 Why `useReducer`?

useState is great for simple state updates:

But when updates depend on conditions, multiple actions, or complex objects, useReducer is more organized.

🧩 Basic Syntax

– `state`: Current state

– `dispatch`: Function to trigger updates

– `reducer`: Function that controls how state updates

– `initialState`: Default state value

🧪 Example 1: Simple Counter

import { useReducer } from "react";

const initialState = { count: 0 };

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

return (
<div>
<h2>Count: {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;

import { useReducer } from "react";

const initialState = { count: 0 };

function 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() {

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

return (

<div>

<h2>Count: {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;

🧪 Example 2: Updating Complex State (Object)

const initialState = { name: "", age: "" };

function reducer(state, action) {
return { ...state, [action.field]: action.value };
}

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

return (
<form>
<input
placeholder="Name"
value={state.name}
onChange={(e) =>
dispatch({ field: "name", value: e.target.value })
}
/>

<input
placeholder="Age"
value={state.age}
onChange={(e) =>
dispatch({ field: "age", value: e.target.value })
}
/>

<p>{JSON.stringify(state)}</p>
</form>
);
}

const initialState = { name: "", age: "" };

function reducer(state, action) {

return { ...state, [action.field]: action.value };

}

function Form() {

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

return (

<form>

<input

placeholder="Name"

value={state.name}

onChange={(e) =>

dispatch({ field: "name", value: e.target.value })

}

<input

placeholder="Age"

value={state.age}

onChange={(e) =>

dispatch({ field: "age", value: e.target.value })

}

<p>{JSON.stringify(state)}</p>

</form>

);

}

🧪 Example 3: Todo List

const initialState = [];

function reducer(state, action) {
switch (action.type) {
case "ADD":
return [...state, action.payload];
case "REMOVE":
return state.filter((todo) => todo.id !== action.id);
default:
return state;
}
}

function TodoApp() {
const [todos, dispatch] = useReducer(reducer, initialState);
const [text, setText] = useState("");

return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />

<button
onClick={() =>
dispatch({ type: "ADD", payload: { id: Date.now(), text } })
}
>
Add Todo
</button>

<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.text}
<button onClick={() => dispatch({ type: "REMOVE", id: todo.id })}>
❌
</button>
</li>
))}
</ul>
</div>
);
}

const initialState = [];

function reducer(state, action) {

switch (action.type) {

case "ADD":

return [...state, action.payload];

case "REMOVE":

return state.filter((todo) => todo.id !== action.id);

default:

return state;

}

function TodoApp() {

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

const [text, setText] = useState("");

return (

<div>

<input value={text} onChange={(e) => setText(e.target.value)} />

<button

onClick={() =>

dispatch({ type: "ADD", payload: { id: Date.now(), text } })

}

Add Todo

</button>

<ul>

{todos.map((todo) => (

{todo.text}

<button onClick={() => dispatch({ type: "REMOVE", id: todo.id })}>

❌

</button>

</li>

))}

</ul>

</div>

);

}

🔍 When to Use `useReducer`

Use useReducer instead of useState when:

Situation	Best Option
Simple state	`useState`
Complex state logic	`useReducer` ✔
Many related values	`useReducer` ✔
Multiple actions modify state	`useReducer` ✔
Behavior similar to Redux	`useReducer` ✔

🧠 Summary

Feature	Description
Alternative to `useState`	✔
Best for complex state	✔
Uses `dispatch(action)`	✔
Reducer controls update logic	✔
Works great with context for global state	✔

React useReducer Hook