How does the useReducer hook work?

💡 Concept Name

useReducer hook is a React hook that manages complex state logic using a reducer function to update state based on dispatched actions.

📘 Quick Intro

The useReducer hook is an alternative to useState for managing state in React components, especially useful when state logic involves multiple sub-values or complex updates.

🧠 Analogy / Short Story

Think of useReducer as a smart manager who listens to requests (actions) and decides how to update the company’s status (state) based on the type of request received. This manager (reducer function) always follows the same rules to keep things consistent and predictable.

🔧 Technical Explanation

🧩 useReducer accepts a reducer function and an initial state.
⚙️ The reducer function takes the current state and an action, then returns a new updated state.
📤 You dispatch actions to trigger state changes.
🔁 Unlike useState, it centralizes state update logic in one function.
🔄 Useful for managing related state transitions in complex components.

💻 Real Code Example


import React, { 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 };
    default:
      return state;
  }
}

function 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>
  );
}

❓ Interview Q&A

Q1: What is the useReducer hook used for?
A: It manages complex state logic using a reducer function and actions.

Q2: How does useReducer differ from useState?
A: useReducer centralizes state update logic and is better for complex state transitions.

Q3: What does the reducer function receive?
A: The current state and an action object.

Q4: How do you trigger state changes with useReducer?
A: By dispatching actions with a type.

Q5: Can useReducer be used with context?
A: Yes, combining useReducer with Context API helps manage global state.

Q6: What does dispatch do?
A: It sends an action to the reducer to update the state.

Q7: Is the reducer function pure?
A: Yes, it must not cause side effects and always return a new state.

Q8: Can useReducer replace Redux?
A: It can for simpler cases but Redux offers more features for complex state management.

Q9: What happens if an unknown action type is dispatched?
A: The reducer returns the current state unchanged.

Q10: Can you have multiple useReducers in one component?
A: Yes, each managing different parts of state.

📝 MCQs

Q1. What does useReducer manage?

Simple state
Complex state logic
Side effects
Component rendering

Q2. What arguments does useReducer take?

Reducer and initial state
Only reducer
Only initial state
Reducer and dispatch

Q3. What does the reducer function return?

Old state
New state
Action
Dispatch

Q4. How do you update state in useReducer?

Direct mutation
Dispatching actions
Calling setState
Using context

Q5. Is the reducer function pure?

No
Yes
Sometimes
Depends on usage

Q6. Can useReducer be combined with Context API?

No
Yes
Sometimes
Never

Q7. What happens if an unknown action is dispatched?

Error
State unchanged
Reset state
Ignore action

Q8. Can you have multiple useReducers in one component?

No
Yes
Only one
Sometimes

Q9. Is useReducer better than useState for complex logic?

No
Yes
Depends
Never

Q10. What triggers the reducer function?

setState call
Dispatching an action
useEffect
Rendering

💡 Bonus Insight

Combining useReducer with the Context API enables managing global complex state in React applications more cleanly without needing external libraries for simpler cases.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon