AI App Development from Zero Knowledge – 1000 Hours #13

＃13: Getting Stuck in a “Simple” Feature – A 10-Hour Battle with Flag Storage Hell

Summary

All I wanted was a button that, once pressed early in the morning, would unlock a few checkboxes for the rest of the day. Simple, right? That’s what I thought—at first. But as I tried to implement flag storage using localStorage and React’s useEffect, I stumbled into 10 hours of debugging, unexpected async conflicts, and mysterious error messages. This is a real record of one of those “it should have been easy” nightmares. And how I eventually crawled out of it—thanks to stubborn persistence and ChatGPT.

It Was Supposed to Be Just Flag Storage

My goal was simple:
Add a “morning meeting” button that can only be pressed between 3am and 5am. When clicked, it saves isMorningMeetingDone = true in localStorage.
Then, read that value to enable some “morning activity” checkboxes for the rest of the day.

{
  "onMorningMeeting": {
    "flag": "true",
    "date": "2024-11-22"
  }
}

Save it like that, reset it when the date changes, and read localStorage every time. That’s all.
So why did it take 10 hours?

---

The useEffect Nightmare – Triggers That Won’t Stop

The first enemy I met was the endless loop of useEffect firing again and again.

“Cleaning up useEffect.”
“Resetting morning meeting state.”
“Triggered by morningMeetingDate: Fri Nov 22 2024.”

These logs repeated endlessly.
And worst of all, savedIsMorningMeetingDone was always null. But the data was saved—confirmed by checking localStorage.

Still, when reading it, it returned null.
The cause was a tangle of problems: useEffect order, dependency arrays, unresolved async handling, and more.

---

Then Came a Mysterious Error

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Googling didn’t help much.
I wondered if it was caused by a Chrome extension, but disabling everything didn’t fix it.
Even worse, the error didn’t break the process—it just sat there, annoying and unexplained.

---

Narrowing It Down, One Line at a Time

At that point, all I could do was trim logic and test.
I removed unnecessary useEffects, changed dependency arrays, added try-catch blocks—still null.
Even though the morning meeting button worked fine, a single reload made it all disappear.

After countless tweaks, I finally noticed something:
localStorage.setItem() was being called inside competing useEffects. They were overwriting each other.

---

The Lesson I Learned – And a Message to You

Once you find the cause, it seems so simple.
But invisible bugs like this—"it should work, but it doesn’t"—are the hardest kind.

Here’s the core lesson:

"Even simple features become swamps if the data flow is complex."

---

What I Really Gained After 10 Hours

I exchanged dozens of messages with ChatGPT.
“Maybe this is causing the null?”
“Try adjusting the dependency array.”
“Yes, localStorage saves instantly—but timing for reading is separate.”

Without that help, I might’ve given up.
What I gained wasn’t just a working feature—but the skill to crawl through bugs and dig out answers myself.

---

So to You Reading This:

If you’ve ever thought,
“Maybe I could do this too,”
“Maybe I want to try something…”
Then just start. Even with this chat box.

Because the answer always exists—on the other side of not giving up.