What is useReducer in React?

2 min readDec 13, 2023

The useReducer hook is a built-in hook in React that provides a way to manage complex state logic in functional components. It is an alternative to using the useState hook, especially when you have state that depends on the previous state or when you need to perform complex state updates. Let’s deep dive into the concepts of useReducer in React.

What is useReducer?

useReducer is a hook for managing state in functional components.
It’s typically used for managing more complex state logic or when state updates depend on the previous state.
It follows the same principles as the useState hook but offers more control over state updates.

The Syntax:

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

state is the current state.
dispatch is a function that allows you to send an action to update the state. (Instead of setState).
reducer is a pure function that takes current state and actions. Specifies how state should change based on the action.
initialState is the initial value of the state.

Reducer Function:

The reducer function takes two arguments: the current state and an action. It returns the new state based on the action’s type and optional payload.

const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + action.payload };
case 'DECREMENT':
return { count: state.count - action.payload };
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, initialState);

Actions:

Actions are objects that describe what should happen, like { type: ‘INCREMENT’ , payload: 1 }. The type property is typically a string that describes the action. The payload property contains any additional data needed for the action.

Dispatching Actions:

To update the state, you dispatch actions using the dispatch function:

dispatch({ type: 'INCREMENT' , payload: 1 });

Benefits:

useReducer is especially useful for managing complex state logic.
It helps in avoiding deeply nested state updates.
It can make your code more predictable and easier to reason about, especially in larger applications.

When to Use useReducer?

STATE MANAGEMENT WITH useState IS NOT ENOUGH IN CERTAIN SITUATIONS:

When components have a lot of state variables and state updates, spread across many event handlers all over the component.
When multiple state updates need to happen at the same time (as a reaction to the same event, like “starting a game”)
When updating one piece of state depends on one or multiple other pieces of state

+IN ALL THESE SITUATIONS, useReducer CAN BE OF GREAT HELP.

const STATE = { loading: false, error: false, post: {}, };
const [state, dispatch] = useReducer(reducer, STATE);

Thanks for reading this Mini React Concepts Guide, If you like this please like and share with your friends and also don’t forget to share your view and If I forgot to mention a concept please share in the comments. Thanks