React useReducer Hook

The useReducer hook is a built-in hook in React that allows you to manage complex state logic in your application. It's an alternative to the useState hook that provides more flexibility and control over state management.

The useReducer hook takes two arguments: a reducer function and an initial state. The reducer function is responsible for updating the state based on actions that are dispatched to it. The initial state argument is the starting value for the state.

Here's an example of how to use the useReducer hook:

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>
    </>
  );
}

In this example, we define an initial state object with a count property set to 0. We also define a reducer function that takes a state and an action as arguments and returns a new state based on the action type.

In the Counter component, we call the useReducer hook with the reducer function and initialState as arguments. This returns an array with two values: the current state and a dispatch function. The dispatch function is used to send actions to the reducer, which updates the state accordingly.

Finally, we render the current count value and two buttons that dispatch increment and decrement actions when clicked, respectively.

That's a simple example of how to use the useReducer hook in React. With this hook, you can handle more complex state updates in your application with ease.

React useReducer Hook

Comments

React

React useContext Hook

More from this blog

Improve Laravel development experience

Add Calendly to Nextjs 13

DbGate - The Smartest SQL+noSQL Database Client

Add responsive video to Nextjs using Bootstrap5

How to create a middleware in Laravel?

Command Palette

Comments

React

React useContext Hook

More from this blog