How can I use the useReducer hook in React?

How can I use the useReducer hook in React?

The useReducer hook is a great way to manage state in React. It works similarly to useState but is more suited for complex state logic.

Can you give me a simple example of how to implement it?

Sure! Here's a basic 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:
      throw new Error();
  }
}

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

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

What are the advantages of using useReducer over useState?

Using useReducer can help manage more complex state logic, especially when the next state depends on the previous one. It also makes it easier to handle multiple state transitions in a more organized way.