Managing Complex State Transitions with useReducer0%

Managing Complex State Transitions with useReducer

Beginner12 min read•Updated: Jul 11, 2026

Managing Complex State Transitions with useReducer

1. Modeling Finite State Machines

In sophisticated web interfaces (such as audio/video players, multi-step checkout wizards, file uploaders, or quiz engines), components transition through distinct, interdependent states:

Output

1[Idle] ──> [Uploading] ──> [Processing] ──> [Success]
2                │                 │
3                └───► [Error] ◄───┘

Attempting to model this with multiple boolean variables (isUploading, isProcessing, isSuccess, isError) invites invalid, impossible states:

What if both isUploading and isSuccess are somehow true simultaneously?
What if isError is true while isProcessing is still running?

Using useReducer allows you to model your component as a Finite State Machine (FSM), where only valid, allowable transitions can occur.

2. Practical Implementation: Multi-Step Quiz Engine

Let's build a real-world multi-step quiz state machine using useReducer:

JSX

1import React, { useReducer } from 'react';
2 
3const QUIZ_QUESTIONS = [
{
  id: 1,
  question: 'Which hook provides local component state in React?',
  options: ['useEffect', 'useMemo', 'useState', 'useRef'],
  correctIndex: 2
},
{
  id: 2,
  question: 'What is the return type of a React functional component?',
  options: ['JSON String', 'React Element / JSX', 'Promise', 'HTML DOM Node'],
  correctIndex: 1
}
16];
17 
18const initialState = {
status: 'ready', // 'ready' | 'active' | 'finished'
currentQuestionIndex: 0,
selectedAnswer: null,
score: 0,
secondsRemaining: 60
24};
25 
26function quizReducer(state, action) {
switch (action.type) {
  case 'START_QUIZ':
    return {
      ...initialState,
      status: 'active'
    };
33 
  case 'SELECT_OPTION': {
    const currentQ = QUIZ_QUESTIONS[state.currentQuestionIndex];
    const isCorrect = action.payload === currentQ.correctIndex;
37 
    return {
      ...state,
      selectedAnswer: action.payload,
      score: isCorrect ? state.score + 10 : state.score
    };
  }
44 
  case 'NEXT_QUESTION': {
    const nextIndex = state.currentQuestionIndex + 1;
    const isFinished = nextIndex >= QUIZ_QUESTIONS.length;
48 
    return {
      ...state,
      currentQuestionIndex: nextIndex,
      selectedAnswer: null,
      status: isFinished ? 'finished' : 'active'
    };
  }
56 
  case 'RESTART_QUIZ':
    return initialState;
59 
  default:
    return state;
}
63}
64 
65export default function QuizApp() {
const [state, dispatch] = useReducer(quizReducer, initialState);
const { status, currentQuestionIndex, selectedAnswer, score } = state;
68 
if (status === 'ready') {
  return (
    <div className="quiz-card">
      <h2>React Certification Practice Exam</h2>
      <p>Test your knowledge across core React engineering principles.</p>
      <button onClick={() => dispatch({ type: 'START_QUIZ' })} className="btn-primary">
        Start Assessment
      </button>
    </div>
  );
}
80 
if (status === 'finished') {
  return (
    <div className="quiz-card">
      <h2>Assessment Completed!</h2>
      <p className="score-text">Final Score: {score} / {QUIZ_QUESTIONS.length * 10}</p>
      <button onClick={() => dispatch({ type: 'RESTART_QUIZ' })}>
        Retake Quiz
      </button>
    </div>
  );
}
92 
const activeQuestion = QUIZ_QUESTIONS[currentQuestionIndex];
94 
return (
  <div className="quiz-card">
    <header className="quiz-header">
      <span>Question {currentQuestionIndex + 1} of {QUIZ_QUESTIONS.length}</span>
      <span>Score: {score}</span>
    </header>
101 
    <h3>{activeQuestion.question}</h3>
103 
    <div className="options-list">
      {activeQuestion.options.map((option, idx) => (
        <button
          key={option}
          disabled={selectedAnswer !== null}
          className={`option-btn ${selectedAnswer === idx ? 'option-selected' : ''}`}
          onClick={() => dispatch({ type: 'SELECT_OPTION', payload: idx })}
        >
          {option}
        </button>
      ))}
    </div>
116 
    {selectedAnswer !== null && (
      <button
        className="btn-next"
        onClick={() => dispatch({ type: 'NEXT_QUESTION' })}
      >
        {currentQuestionIndex + 1 === QUIZ_QUESTIONS.length ? 'Finish Quiz' : 'Next Question →'}
      </button>
    )}
  </div>
);
127}

3. Why This Architecture Eliminates Bugs

1
Impossible States Prevented: Notice that status can only be 'ready', 'active', or 'finished'. It is physically impossible to display both the finish screen and an active question simultaneously.
2
Atomic Transitions: Scoring and answer selection occur together in a single atomic update (SELECT_OPTION).
3
Pristine Reset: RESTART_QUIZ returns initialState cleanly without having to reset 5 separate state variables.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What is an "impossible state" in React UI engineering?

Question 2

How does modeling state with an explicit status enum in a reducer eliminate impossible states?

Question 3

What action handles progressing to the next question in the QuizApp reducer?

Question 4

Why is disabled={selectedAnswer !== null} applied to the quiz option buttons?

Question 5

How does useReducer simplify resetting a complex component back to its starting state?

Next Lesson

Combining useReducer with Context API

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Reducer Functions, Actions, and Dispatch	Combining useReducer with Context API

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext