Can you explain the useReducer hook in React with an example?

Can you explain the useReducer hook in React with an example?

Sure! The useReducer hook is used for managing complex state in React components. It works similarly to useState but is more suited for state logic that involves multiple sub-values or when the next state depends on the previous one.

Can you provide a code example?

Absolutely! Here's a simple 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 (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

This code defines a simple counter using useReducer.

What are the advantages of using useReducer over useState?

The main advantages of useReducer are:

1. Better state management for complex state logic.
2. Easier to understand and maintain when dealing with multiple state transitions.
3. Centralized state updates through a single reducer function.