What are some examples of using useReducer in React?

Can you explain what useReducer is in React?

Sure! useReducer is a React hook that helps manage complex state logic in functional components. It works similarly to useState but is more suitable for managing state that depends on previous state.

Can you give me an example of how to use useReducer?

Absolutely! Here's a simple example: You can use useReducer to manage a counter. First, define a reducer function that takes the current state and an action, then returns the new state. Use useReducer to initialize the state and dispatch actions.

What would the code look like for that?

Here's a basic implementation:

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 sets up a counter with increment and decrement buttons.