useReducer - anastasiamexa/react-complete-guide-course-resources GitHub Wiki

The useReducer hook is a React hook that is used for managing more complex state logic in functional components. It is an alternative to the useState hook, especially when the state logic involves multiple actions and transitions between states. useReducer is inspired by the concept of reducers in Redux.

Here's a breakdown of how useReducer works and how you can use it to manage state:

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

• state: The current state value.
• dispatch: A function used to dispatch actions to update the state.
• reducer: A function that specifies how the state should change in response to actions.
• initialState: The initial state of your component.

The reducer function takes two arguments: the current state (state) and an action object. It evaluates the action.type and returns a new state based on that action.

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

To update the state, you dispatch actions using the dispatch function. The dispatch function takes an action object as an argument.

dispatch({ type: 'INCREMENT' });
dispatch({ type: 'DECREMENT' });

Here's a simple example of using useReducer to manage a counter state:

import React, { useReducer } from 'react';

function counterReducer(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(counterReducer, { count: 0 });

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

In this example, the counterReducer function handles the logic for incrementing and decrementing the count. The dispatch function is used to trigger these actions from the component, and the state holds the current state of the counter.

1. Complex State Logic:
useReducer is useful when state transitions become complex and involve multiple actions.

2. Readability:
Reducers help separate state logic, making your code more readable and maintainable.

3. Predictability:
The pattern is similar to Redux, providing a predictable way to manage state changes.

4. Performance:
In certain scenarios, using useReducer can lead to better performance compared to multiple useState calls.

While useReducer is powerful, it might be overkill for simpler state management scenarios. In those cases, useState may be sufficient. The choice between useReducer and useState depends on the complexity and requirements of your component's state management.