React · Hooks (Comprehensive)

useReducer Hook

Master useReducer for managing complex state logic with actions and reducers - perfect for state that involves multiple sub-values or complex update logic.

Find videos you like?

Save to resource drawer for future reference!

What is useReducer?

Alternative to useState for complex state

useReducer is a Hook for managing state with a reducer function. It's ideal when you have complex state logic with multiple sub-values or when the next state depends on the previous one.

Basic Syntax

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

reducer:Function that determines how state updates

initialState:Starting state value

state:Current state value

dispatch:Function to trigger state updates

useState

• Simple state updates
• Single value or object
• Direct setState calls

useReducer

• Complex state logic
• Multiple sub-values
• Actions describe "what happened"

When to Use?

Use useReducer when you have state transitions that depend on previous state, or when state logic becomes complex with multiple setState calls!

Why We Need useReducer

The problem useState can't solve

The useState Problem

When state logic becomes complex, useState leads to scattered, hard-to-maintain code with bugs and race conditions!

🚨 useState Problems

Problem 1: Scattered Logic

// ❌ Logic scattered everywhere

const [count, setCount] = useState(0);

const [isLoading, setIsLoading] = useState(false);

const [error, setError] = useState(null);

function handleIncrement() {}

setIsLoading(true);

setError(null);

// What if this fails?

setCount(prev => prev + 1);

setIsLoading(false);

}

State updates are scattered across multiple functions. Hard to track what's happening!

Problem 2: Race Conditions

// ❌ Race condition possible

function handleAsync() {}

setIsLoading(true);

fetchData().then(data => {}

setData(data);

setIsLoading(false);

}));

// What if user clicks again?

}

Multiple async operations can interfere with each other!

✅ useReducer Solutions

Solution 1: Centralized Logic

// ✅ All logic in one place

function reducer(state, action) {}

switch (action.type) {}

case 'INCREMENT_START':

return { ...state, isLoading: true, error: null }};

case 'INCREMENT_SUCCESS':

return { ...state, count: state.count + 1, isLoading: false }};

case 'INCREMENT_ERROR':

return { ...state, error: action.error, isLoading: false }};

})

}

All state logic is centralized and predictable!

Solution 2: No Race Conditions

// ✅ Predictable state updates

function handleAsync() {}

dispatch({} type: 'FETCH_START' }));

fetchData().then(data => {}

dispatch({} type: 'FETCH_SUCCESS', payload: data }));

})).catch(error => {}

dispatch({} type: 'FETCH_ERROR', payload: error }));

}));

}

Each action creates a new state - no interference!

Step-by-Step Guide

Learn useReducer progressively

Step 1: Define Your State Shape

First, think about what state you need and how it's structured. Group related state together for better organization!

//Think about your state structure

const initialState = {}

count: 0,

isLoading: false,

error: null

});

Pro Tip

Group related state together. If you have multiple useState calls that update together, they probably belong in a reducer!

Step 2: Define Action Types

Actions describe "what happened" in your application. They should be descriptive and consistent!

//Define all possible actions

const actions = {}

INCREMENT: 'INCREMENT',

DECREMENT: 'DECREMENT',

RESET: 'RESET',

SET_LOADING: 'SET_LOADING',

SET_ERROR: 'SET_ERROR'

});

Key Point

Use constants for action types to avoid typos. Action types should be descriptive and in past tense (like "USER_CLICKED_BUTTON").

Step 3: Create the Reducer Function

The reducer handles how state changes based on actions. This is pure function that takes state and action!

function reducer(state, action) {}

switch (action.type) {}

case 'INCREMENT':

return {} ...state, count: state.count + 1 });

case 'DECREMENT':

return {} ...state, count: state.count - 1 });

case 'RESET':

return initialState;

default:

return state; // Never forget this!

};

Important

Always return a new object (never mutate state). The spread operator (...) is your best friend!

Step 4: Use useReducer in Component

Replace useState with useReducer. This gives you state and dispatch to manage your complex state!

function Counter() {}

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

// Use state.count, state.isLoading, state.error

// Use dispatch to update state

};

Key Point

The first value is your state, the second is dispatch. Think of dispatch as "sending a message" about what happened.

Step 5: Dispatch Actions

Use dispatch to trigger state changes. This sends actions to your reducer to update the state!

//Dispatch actions to update state

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

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

dispatch({} type: 'RESET' }));

//With payload data

dispatch({} type: 'SET_VALUE', payload: 42 }));

Best Practice

Actions should describe WHAT happened, not HOW to update. "INCREMENT" is better than "SET_COUNT_TO_COUNT_PLUS_ONE".

Example: Counter with useReducer

Managing state with actions

Counter using useReducer

Dispatch actions to update state

Frontend

// Reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    case 'SET':
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(
    counterReducer, 
    { count: 0 }
  );

  return (
    <div className="container">
      <h1>🔢 useReducer Counter</h1>

      <div className="display">
        {state.count}
      </div>

      <div className="actions">
        <button 
          onClick={() => dispatch({ type: 'DECREMENT' })}
          className="btn-red"
        >
          − Decrement
        </button>

        <button 
          onClick={() => dispatch({ type: 'RESET' })}
          className="btn-gray"
        >
          Reset
        </button>

        <button 
          onClick={() => dispatch({ type: 'INCREMENT' })}
          className="btn-green"
        >
          + Increment
        </button>
      </div>

      <button 
        onClick={() => dispatch({ type: 'SET', payload: 100 })}
        className="btn-set"
      >
        Set to 100
      </button>

      <div className="info">
        💡 Actions describe what happened!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

Predictable Updates

Reducer centralizes state logic, making updates predictable and easier to test.

Actions Describe Intent

Actions clearly describe "what happened" rather than "how to update".

Complex State

Perfect for state with multiple sub-values or complex transitions.

Easier Testing

Reducers are pure functions - easy to test in isolation!

Redux Pattern!

useReducer follows the same pattern as Redux. Learning it prepares you for Redux and other state management libraries!

Previous Topic

Why Use Effect?

Understand the fundamental need for useEffect, when side effects are necessary, and the philosophy behind effect-driven programming.

Next Topic

useContext Hook

Use Context API with useContext Hook, avoid prop drilling, and understand context performance.

Ask a Question

Have a question about useReducer Hook? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useReducer Hook

Master useReducer for managing complex state logic with actions and reducers - perfect for state that involves multiple sub-values or complex update logic.

Find videos you like?

Save to resource drawer for future reference!

What is useReducer?

Alternative to useState for complex state

useReducer is a Hook for managing state with a reducer function. It's ideal when you have complex state logic with multiple sub-values or when the next state depends on the previous one.

Basic Syntax

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

reducer:Function that determines how state updates

initialState:Starting state value

state:Current state value

dispatch:Function to trigger state updates

useState

• Simple state updates
• Single value or object
• Direct setState calls

useReducer

• Complex state logic
• Multiple sub-values
• Actions describe "what happened"

When to Use?

Use useReducer when you have state transitions that depend on previous state, or when state logic becomes complex with multiple setState calls!

Why We Need useReducer

The problem useState can't solve

The useState Problem

When state logic becomes complex, useState leads to scattered, hard-to-maintain code with bugs and race conditions!

🚨 useState Problems

Problem 1: Scattered Logic

// ❌ Logic scattered everywhere

const [count, setCount] = useState(0);

const [isLoading, setIsLoading] = useState(false);

const [error, setError] = useState(null);

function handleIncrement() {}

setIsLoading(true);

setError(null);

// What if this fails?

setCount(prev => prev + 1);

setIsLoading(false);

}

State updates are scattered across multiple functions. Hard to track what's happening!

Problem 2: Race Conditions

// ❌ Race condition possible

function handleAsync() {}

setIsLoading(true);

fetchData().then(data => {}

setData(data);

setIsLoading(false);

}));

// What if user clicks again?

}

Multiple async operations can interfere with each other!

✅ useReducer Solutions

Solution 1: Centralized Logic

// ✅ All logic in one place

function reducer(state, action) {}

switch (action.type) {}

case 'INCREMENT_START':

return { ...state, isLoading: true, error: null }};

case 'INCREMENT_SUCCESS':

return { ...state, count: state.count + 1, isLoading: false }};

case 'INCREMENT_ERROR':

return { ...state, error: action.error, isLoading: false }};

})

}

All state logic is centralized and predictable!

Solution 2: No Race Conditions

// ✅ Predictable state updates

function handleAsync() {}

dispatch({} type: 'FETCH_START' }));

fetchData().then(data => {}

dispatch({} type: 'FETCH_SUCCESS', payload: data }));

})).catch(error => {}

dispatch({} type: 'FETCH_ERROR', payload: error }));

}));

}

Each action creates a new state - no interference!

Step-by-Step Guide

Learn useReducer progressively

Step 1: Define Your State Shape

First, think about what state you need and how it's structured. Group related state together for better organization!

//Think about your state structure

const initialState = {}

count: 0,

isLoading: false,

error: null

});

Pro Tip

Group related state together. If you have multiple useState calls that update together, they probably belong in a reducer!

Step 2: Define Action Types

Actions describe "what happened" in your application. They should be descriptive and consistent!

//Define all possible actions

const actions = {}

INCREMENT: 'INCREMENT',

DECREMENT: 'DECREMENT',

RESET: 'RESET',

SET_LOADING: 'SET_LOADING',

SET_ERROR: 'SET_ERROR'

});

Key Point

Use constants for action types to avoid typos. Action types should be descriptive and in past tense (like "USER_CLICKED_BUTTON").

Step 3: Create the Reducer Function

The reducer handles how state changes based on actions. This is pure function that takes state and action!

function reducer(state, action) {}

switch (action.type) {}

case 'INCREMENT':

return {} ...state, count: state.count + 1 });

case 'DECREMENT':

return {} ...state, count: state.count - 1 });

case 'RESET':

return initialState;

default:

return state; // Never forget this!

};

Important

Always return a new object (never mutate state). The spread operator (...) is your best friend!

Step 4: Use useReducer in Component

Replace useState with useReducer. This gives you state and dispatch to manage your complex state!

function Counter() {}

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

// Use state.count, state.isLoading, state.error

// Use dispatch to update state

};

Key Point

The first value is your state, the second is dispatch. Think of dispatch as "sending a message" about what happened.

Step 5: Dispatch Actions

Use dispatch to trigger state changes. This sends actions to your reducer to update the state!

//Dispatch actions to update state

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

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

dispatch({} type: 'RESET' }));

//With payload data

dispatch({} type: 'SET_VALUE', payload: 42 }));

Best Practice

Actions should describe WHAT happened, not HOW to update. "INCREMENT" is better than "SET_COUNT_TO_COUNT_PLUS_ONE".

Example: Counter with useReducer

Managing state with actions

Counter using useReducer

Dispatch actions to update state

Frontend

// Reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    case 'SET':
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(
    counterReducer, 
    { count: 0 }
  );

  return (
    <div className="container">
      <h1>🔢 useReducer Counter</h1>

      <div className="display">
        {state.count}
      </div>

      <div className="actions">
        <button 
          onClick={() => dispatch({ type: 'DECREMENT' })}
          className="btn-red"
        >
          − Decrement
        </button>

        <button 
          onClick={() => dispatch({ type: 'RESET' })}
          className="btn-gray"
        >
          Reset
        </button>

        <button 
          onClick={() => dispatch({ type: 'INCREMENT' })}
          className="btn-green"
        >
          + Increment
        </button>
      </div>

      <button 
        onClick={() => dispatch({ type: 'SET', payload: 100 })}
        className="btn-set"
      >
        Set to 100
      </button>

      <div className="info">
        💡 Actions describe what happened!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

Predictable Updates

Reducer centralizes state logic, making updates predictable and easier to test.

Actions Describe Intent

Actions clearly describe "what happened" rather than "how to update".

Complex State

Perfect for state with multiple sub-values or complex transitions.

Easier Testing

Reducers are pure functions - easy to test in isolation!

Redux Pattern!

useReducer follows the same pattern as Redux. Learning it prepares you for Redux and other state management libraries!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Why Use Effect?

useContext Hook

Building Your Learning Module...

useReducer Hook

Basic Syntax

useState

useReducer

When to Use?

The useState Problem

🚨 useState Problems

Problem 1: Scattered Logic

Problem 2: Race Conditions

✅ useReducer Solutions

Solution 1: Centralized Logic

Solution 2: No Race Conditions

Step 1: Define Your State Shape

Step 2: Define Action Types

Step 3: Create the Reducer Function

Step 4: Use useReducer in Component

Step 5: Dispatch Actions

Counter using useReducer

Predictable Updates

Actions Describe Intent

Complex State

Easier Testing

Redux Pattern!

Why Use Effect?

useContext Hook

useReducer Hook

Basic Syntax

useState

useReducer

When to Use?

The useState Problem

🚨 useState Problems

Problem 1: Scattered Logic

Problem 2: Race Conditions

✅ useReducer Solutions

Solution 1: Centralized Logic

Solution 2: No Race Conditions

Step 1: Define Your State Shape

Step 2: Define Action Types

Step 3: Create the Reducer Function

Step 4: Use useReducer in Component

Step 5: Dispatch Actions

Counter using useReducer

Predictable Updates

Actions Describe Intent

Complex State

Easier Testing

Redux Pattern!