Q336- Explain useReducer hook in React? Is it same as Redux?

useReducer is a React Hook for managing complex state logic inside a component.
It follows the reducer pattern, similar to Redux — but they are NOT the same.

---

🔹 What is useReducer?

useReducer is an alternative to useState when:

• State is complex
• Next state depends on previous state
• Multiple related state values exist

---

🧪 Basic Syntax

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

---

🧪 Example

function reducer(state, action) {
  switch (action.type) {
    case "INC":
      return { count: state.count + 1 };
    case "DEC":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "INC" })}>+</button>
    </>
  );
}

---

🧠 Why Use useReducer?

✔ Centralizes state logic
✔ Predictable state updates
✔ Cleaner than multiple useState
✔ Good for complex component logic

---

🔁 Is useReducer the Same as Redux?

❌ No — They Are Different

Feature	useReducer	Redux
Scope	Component-level	Global app-level
Store	No global store	Centralized store
Middleware	❌ No	✅ Yes
DevTools	❌ No	✅ Yes
Async handling	Manual	Thunk / Saga
Boilerplate	Minimal	More

---

🧠 Key Similarities

✔ Both use reducer functions
✔ Both use actions
✔ Both are predictable
✔ Same mental model

---

🎯 When to Use What?

✅ Use useReducer when:

• State is complex but local
• No need for global access
• Component-specific logic

✅ Use Redux when:

• State is shared across many components
• Need middleware (logging, async)
• Large-scale application

---

🎯 Short Interview Answer

useReducer is a React Hook used to manage complex local state using a reducer function.
It follows a similar pattern to Redux but does not replace it, as Redux is meant for global state management with middleware and dev tools.

---

⭐ One-line summary

useReducer is Redux-like logic for a single component—not a Redux replacement.