0PricingLogin▼
React Native Academy · Lesson

useReducer for Complex State Logic

Replace multiple useState calls with a single useReducer, write a reducer function with action types, and dispatch actions from UI events.

Why useReducer?

When a component has several useState calls whose updates are interrelated, the logic can become hard to follow. useReducer centralizes all state transitions in a single reducer function, making complex state logic easier to understand, test, and debug — the same pattern made popular by Redux.

The Reducer Function

A reducer is a pure function that takes the current state and an action object, and returns the next state. It must be pure — no side effects, no API calls, no mutations of the incoming state object. Return a new object for the new state. The action.type string identifies what transition to perform.

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 };
    default:
      return state;
  }
}

All lessons in this course

  1. useRef for DOM Nodes and Mutable Values
  2. useReducer for Complex State Logic
  3. useCallback and useMemo for Performance
  4. Writing Custom Hooks
← Back to React Native Academy