DEV Community

Cover image for I Finally Understood useReducer by Building a Real App (Not Just Small Demos)
Usama
Usama

Posted on

I Finally Understood useReducer by Building a Real App (Not Just Small Demos)

#react #javascript #frontend #webdev

For a long time, useReducer was one of those React hooks that I knew about but never truly used in a real project.

I had watched tutorials. I had seen examples. But in real projects, I always escaped back to useState.

This week, I decided to stop avoiding it.

Instead of learning useReducer from theory, I built a full application with it. And that changed everything.

First: Building a Real React Quiz App

I started with a complete Quiz Application.

This is not a small demo. This app has:

  • Loading state
  • Error state
  • Ready screen
  • Active quiz screen
  • Finish screen
  • Timer
  • Progress bar
  • Points system
  • Highscore
  • Restart flow

That means the app has many states and many transitions between them.

So instead of using many useStates, I designed the app like a state machine:

status: "loading" → "ready" → "active" → "finished"
Enter fullscreen mode Exit fullscreen mode

And I controlled everything using a reducer with actions like:

  • setQuestions
  • setStart
  • newAnswer
  • nextQuestion
  • finishQuiz
  • restart
  • tick

The reducer became the single source of truth for the entire app.

Components became simple:

  • They don’t manage logic
  • They only dispatch actions

This is where I finally understood:

useReducer is not about React.
It is about designing how your app behaves.

Then: The Bank Account Challenge (The Concept Click)

After finishing the big app, I did a small but very smart challenge: a Bank Account simulation.

The state was simple:

{ balance: 0, loan: 0, isActive: false }
Enter fullscreen mode Exit fullscreen mode

But the rules were strict:

  • You can’t deposit if the account is closed
  • You can’t request another loan if you already have one
  • You can’t close the account if there is a loan
  • Every action changes state in a controlled way

This challenge taught me something very important:

useReducer is perfect when state is not just data, but rules.

Here is the challenge link:
👉 https://codesandbox.io/p/sandbox/react-challenge-usereducer-bank-starter-forked-vfjgg7

Why useReducer Finally Makes Sense to Me

Before this week, useReducer felt:

  • Complicated
  • Verbose
  • Unnecessary

Now it feels:

  • Predictable
  • Organized
  • Professional

It also reminded me of old React class components:

  • Centralized logic
  • Controlled updates
  • Clear state transitions

So in a way:

useReducer feels like modern React with classic software architecture thinking.

Final Lesson

  • useState is perfect for simple, independent state
  • useReducer is for processes, workflows, and systems

And real apps are systems.

If someone is scared of useReducer, my honest advice:

Don’t learn it from tutorials.
Learn it by building something that actually needs it.

Project Link

Full project README:
👉 Project Link

Top comments (0)