There are two types of Developers:
People who write clean, predictable code.
People who add console.log() until the browser starts feeling like a crime scene.
I am, unfortunately, Team #2. 🫠
And this story is about the time I spent 45 minutes debugging React only to discover that JavaScript was waiting for me to type one tiny word.
return
It started innocently enough...
I had a React component fetching data from an API and displaying it on the page.
Pretty normal stuff.
The API was working. ✅
The data was coming back. ✅
The component was rendering. ✅
The UI?
Nothing.
Just an empty page.
Beautiful.
Minimalist.
Very intentional-looking.
Definitely not broken.🙂
So obviously, I started investigating.
First thought:
“Maybe the API isn't working.”
Checked it.
Working.
Then:
“Maybe the state isn't updating.”
Checked it.
Working.
Then:
“Maybe something is wrong with the component.”
Checked it.
Also working.
At this point, I reached the most logical conclusion:
React is broken.
Obviously.
So I did what every experienced developer does when they have absolutely no idea what's happening:
console.log("Component rendered");
console.log("API called");
console.log("Data received:", data);
console.log("Users:", users);
console.log("WHY IS THIS EMPTY???");
My console was slowly becoming a conversation with myself.
Then I found the crime scene.
This was the code:
{users.map(user => {
<div key={user.id}>
<h3>{user.name}</h3>
</div>
})}
I stared at it.
It looked fine.
I stared at it again.
Still fine.
Then I noticed it.
There was no return.😭
The problem wasn't React.
The problem wasn't the API.
The problem wasn't my state.
The problem was...
"ME"
When you use curly braces with an arrow function, you need an explicit return.
So instead of:
{users.map(user => {
<div key={user.id}>
<h3>{user.name}</h3>
</div>
})}
I needed:
{users.map(user => (
<div key={user.id}>
<h3>{user.name}</h3>
</div>
))}
And just like that...
THE UI APPEARED.
I genuinely sat there for a few seconds thinking:
“You have got to be kidding me.”
45 minutes.
Forty.
Five.
Minutes.
I had checked the API.
I had checked the state.
I had checked the component.
I had added enough console.log() statements to qualify as a documentary.
I was mentally preparing to rewrite the entire component.
Meanwhile, JavaScript was basically sitting there like:
“You forgot to return the thing.”
Fair enough.
My highly sophisticated debugging methodology
Minute 1:
“This should work.”
Minute 5:
“Maybe it's the API.”
Minute 10:
“Let's check the state.”
Minute 15:
“Let me add a console.log().”
Minute 20:
“Okay, another one.”
Minute 30:
“Why is React doing this to me?”
Minute 40:
“Maybe I'll just rewrite the component.”
Minute 45:
“Oh.”
return. 😭
The actual lesson
The funny thing is, this wasn't some complicated React bug.
I didn't discover some hidden rendering issue.
I didn't need a fancy debugging tool.
I just missed one tiny JavaScript rule.
And honestly, that's probably one of the most annoying things about debugging:
The longer you stare at a bug, the harder it can become to see the obvious.
Sometimes the problem is genuinely complicated.
And sometimes you've spent 45 minutes investigating your entire application because you forgot one word.
So now, before I start blaming React, I'm trying to go through the boring checklist first:
Is the component rendering?
Is the data actually there?
Is the state updating?
Is my .map() returning something?
Did I spell the variable correctly?
Did I accidentally comment something out?
Did I, in fact, forget something incredibly obvious? 👀
Because apparently, that's a real debugging step now.
And yes, I still use console.log().
I'm not going to pretend this experience magically turned me into a debugging expert.
The next time something breaks, I'll probably still do:
console.log("HERE");
console.log("HERE 2");
console.log("HERE 3");
And then I'll stare at the screen.
And refresh.
And refresh again.
And blame React.
But maybe...
I'll check the return first. 😂
Your turn 👇
What's the stupidest bug you've spent way too long debugging?
The kind where you finally find the problem and just sit there thinking:
“...I cannot believe I just did that.”
Please tell me I'm not alone. 😭
Top comments (2)
This happened to me while building interactive document experiences too. We often look for complex causes in frameworks, rendering pipelines, or state management, but sometimes the issue is just one missing line of code.
A great reminder to debug from the basics first.
i was here too 😂