AI App Development from Zero Knowledge – 1000 Hours #8

#8: Battling False Reports and the NaN Nightmare

[Summary]
In this episode, I talk about the bugs I faced while trying to implement a feature that counts “false reports.” Specifically, the counter would reset to zero on page reload, and sometimes displayed “NaN” instead of a number. By reviewing how React state and localStorage should be handled, I tackled the challenge of balancing user experience with technical accuracy.

“Did you just submit a false report?”

I never expected that one simple line would cause such a headache in app development.

The new feature was a “Report Correction” button. After pressing “Report Today’s Work Complete,” if the user changed their mind—“Wait, maybe I didn't do it after all…”—they could roll back their status and increment the “False Reports” counter by one.

Simple, right? Just a confirmation dialog and a number increment.

But then came the dreaded “NaN.”

---

The Mystery of the Resetting Counter

At first, everything seemed fine. The dialog worked, the status rolled back, and the “False Reports” counter appeared on screen.

Perfect. Or so I thought.

But when I reloaded the page, the counter reset to zero.

Even though the state was updated, the value didn’t persist. That’s when I realized the sync with localStorage was broken.

---

The Horror of “NaN”

After further testing, a new issue emerged: the screen started showing “NaN” instead of a number.

“NaN” stands for “Not a Number,” and it usually appears when the app tries to treat a non-numeric value as a number.

In this case, the culprit was the value retrieved from localStorage. It was either null or a string that couldn’t be parsed into a number.

So I added a defensive check like this:

const savedFalseReportCount = localStorage.getItem('falseReportCount');
if (savedFalseReportCount !== null && !isNaN(parseInt(savedFalseReportCount, 10))) {
  setFalseReportCount(parseInt(savedFalseReportCount, 10));
} else {
  setFalseReportCount(0);
}

---

Updating State Isn’t Enough

Another trap: simply calling setFalseReportCount didn’t save the value to localStorage.

Since React state updates are asynchronous, I had to explicitly save the value after confirming it:

const newCount = props.falseReportCount + 1;
props.setFalseReportCount(newCount);
localStorage.setItem('falseReportCount', newCount); // Explicit save

This fixed both problems—no more reset on reload, no more “NaN.”

---

A Battle Behind the Scenes

This “false report” feature was meant to be a light joke—a playful nudge for the user.

But to make it work properly required serious attention to detail in both UI logic and data persistence.

Even one button or dialog can cause bugs if the backend logic isn’t rock-solid. This experience reminded me that every little visual cue needs solid groundwork behind it.

The user only sees the “1 false report” number.

But behind it, there’s a developer who reloaded the page a hundred times and fought off bugs—just to make sure that one number stayed put.

And tomorrow, I’ll keep refining things. One tiny fix at a time.