# Duplicate network requests in Vanilla JS

> How to fix duplicate network requests in Vanilla JS — with the exact fix and copy-paste code.

_Category: Performance · Detector `duplicate-requests` · Severity: warning_

When several components each fetch the same endpoint, you pay for the same data multiple times — wasted bandwidth, extra server load, slower time-to-content, and the risk that responses arrive out of order and overwrite each other. It is endemic in AI-built frontends because each component is generated in isolation, so each one fetches what it needs independently instead of sharing.

## The fix for Vanilla JS

Keep a Map of in-flight promises keyed by URL so concurrent callers share one request, and cache resolved results with a short TTL.

```js
const cache = new Map()
export function getJSON(url) {
  if (!cache.has(url)) cache.set(url, fetch(url).then((r) => r.json()))
  return cache.get(url)
}
```

### Steps

1. Adopt a query cache (or a shared in-flight promise map) that dedupes by key
2. Give the same resource the same query key everywhere it’s used
3. Debounce search/autocomplete and cache responses on the server

## How VibeCheck detects it

The `duplicate-requests` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Duplicate GET request`
- **Threshold:** The same method + URL requested 2 or more times within 2 seconds

## FAQ

### Is fetching the same URL twice always a bug?

Not always — polling or intentional revalidation is fine. VibeCheck flags the same method+URL hitting 2+ times within 2 seconds, which almost always means two components fetched independently rather than sharing.

### Does HTTP caching solve this?

`Cache-Control` helps the browser reuse responses, but the requests are still made and can still race. Client-side dedup (a query cache or shared promise) prevents the duplicate calls in the first place.

### Why do my duplicates come in bursts on mount?

Because several components mount together and each kicks off its own fetch. Sharing one query key (or lifting the fetch to a parent/loader) collapses them into a single request.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/duplicate-network-requests.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/duplicate-network-requests. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt