Devlog: Why My API Was Called Twice (And It Was Totally My Fault)

It started like any other day. I was poking around the app - nothing serious. Just clicking through a few screens, checking the UI, casually living my best DevTools life.

And then I saw it.

In the Network tab: Two identical API calls. Back to back.

Same endpoint. Same payload. Same timestamp, almost.

At first, I thought I was seeing things. Maybe some retry logic? Maybe the backend was returning something weird and the frontend panicked?

Nope. The backend was just responding. Twice. Calmly. As if I’d asked it to.

So obviously, I did what any reasonable developer would do.
I hit refresh. Again. And again. Still two calls. Identical.

Something was up. And I was pretty sure I had written it.

The Investigation

I started digging through the component that made the request - a pretty straightforward React component that used a custom hook to fetch data from the backend.

The hook looked fine.
No useEffect shenanigans. No dependencies causing it to run twice.

But then I noticed the same hook was being used in the parent component and in the child component.

The child used it to display a widget.
The parent used it to handle state.

Both were independently calling the same API - without realizing they were stepping on each other.

Two components. Same hook.
Two renders. Two calls.

What Went Wrong

Technically, nothing was broken. The app wasn’t crashing. The UI looked fine.
But under the hood? It was inefficient, messy, and one step away from becoming a problem.

This is one of those subtle bugs that doesn't break anything, but just quietly burns your backend and bloats your network usage until someone notices.

What I Did

I moved the hook to the parent component - the one that logically owned the data - and passed the result down to the child as props.

No duplication. One fetch. One call.

Problem gone.

What You Can Learn From This

If you're working with React and using custom hooks to fetch data, here's the takeaway:

Don't blindly drop hooks in every component that needs data.
Hooks are just functions. If you call them twice, they’ll run twice. That includes API calls, effects, subscriptions - all of it.

Here are a few tips I wish I had followed earlier:

1. Centralize your data fetching

If multiple components need the same data, let one component fetch it and pass it down.
Props still work. It’s not uncool to use them.

2. Use caching if you must duplicate

If you're using libraries like SWR or React Query, at least you're not hitting the network twice.
But be intentional about it.

3. Watch your tree

It's easy to forget that a child component might also be calling the same logic as its parent - especially if you're reusing hooks across the app.

4. Trust DevTools

If something feels off, open the Network tab. It doesn't lie.
(It’s also the fastest way to catch dumb mistakes.)

TL;DR

• I found an API being called twice.
• It was my fault: I was calling the same hook in both parent and child.
• I moved the fetch to the parent and passed data down.
• Always check for duplicated logic when you see repeated API calls.
• One hook, one call. Don’t let your frontend flood your own backend.

This bug wasn’t big. It didn’t crash anything.
But it taught me a valuable lesson:

Sometimes performance issues aren’t about bad code.
They’re about code that looks fine - but doesn’t respect boundaries.

Hooks are powerful. But with great power comes...
Well, extra network calls - if you're not paying attention.