AI App Development from Zero Knowledge – 1000 Hours #7

The Trap of State and How to Save It

【Summary】
The "number of false reports" resets to 0 the next day... Why? This article explores why useState in React doesn't retain values after a reload and how I solved it using localStorage. It details the beginner pitfalls and my real debugging journey.

"It was 1 yesterday... why did it go back to 0 today?"

That morning, I opened the page and froze. The “number of false reports” had reset again.
Yesterday, I accidentally clicked the “Correct Report” button and confirmed it by pressing “OK” in the dialog. It showed "1 time" as expected.

I used

setFalseReportCount((prev) => prev + 1)

and the number increased.
But after reloading, it went back to zero.
That meant—it wasn’t being saved.

---

useState Isn’t Magic
React's useState is convenient. Just write it, and the UI updates. It looks like the value is kept properly—but it’s not.
Everything disappears after a page reload.

That means, all the data I created using useState without thinking was wiped out the moment I closed the page.

---

Enter localStorage
To fix this, I needed localStorage. With it, you can save values in the browser’s memory, even after the page is closed.

There are only two steps:

① Read from storage

useEffect(() => {
  const savedCount = parseInt(localStorage.getItem('falseReportCount'), 10);
  if (!isNaN(savedCount)) {
    setFalseReportCount(savedCount);
  }
}, []);

② Write to storage

useEffect(() => {
  localStorage.setItem('falseReportCount', falseReportCount);
}, [falseReportCount]);

With just this, the false report count is safely preserved.

---

What I Learned

As a beginner, it’s easy to think, “It works, so it’s fine,” or “It’s displaying correctly, so it’s fine.”
But what you really want is “for it to be saved.”

React’s state is only temporary memory.
If you want something to stay, you have to write code to save it.

---

Persona-Style UI and the Endless Bug Hell

At the same time, I was working on the visuals.
I used CSS to create Persona 5-style speech bubble arrows, applied Expose-Regular font to the date, and added anime-style borders.

But the arrows got hidden due to z-index issues. The font sometimes wouldn’t load.
Error after error.
And yet—that’s what made it fun.

---

Conclusion

“useState doesn’t save data.”
When I realized this, I felt like I had finally stepped into the world of real developers.

AI and React are great tools—but you can’t rely on them completely.
You need to understand the system yourself, and fill in the missing pieces.
That’s how your app slowly comes to life.