🗂️ useReducer in React — A Smarter Alternative to useState

The useReducer hook is used when your state logic becomes complex or when multiple values depend on each other. It works similar to reducers in Redux.

🎯 Why use useReducer?
• Manages complex state in a cleaner way
• Groups state updates with actions
• Easier to debug compared to multiple useState calls

🔧 Example:

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 };
    default:
      return state;
  }
}

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

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

📌 Key points:
• useReducer(reducer, initialState) returns [state, dispatch]
• dispatch is used to trigger state changes
• Great for counters, forms, or any complex state logic