Request deduplication implemented

When three components on a page independently call fetch('/api/products'), three separate network requests fire — even if the responses will be identical. On a dashboard that renders six widgets each fetching user data, that is six redundant requests hitting your database in parallel. ISO 25010:2011 resource-utilisation quantifies the waste; the user-visible cost is slower component render times and unnecessary origin load, both of which worsen under traffic.

Centralize data fetching behind a library that deduplicates in-flight requests. React Query and SWR both guarantee that concurrent calls with the same key share a single network request.

// lib/hooks/use-products.ts — single request shared across all consumers
import { useQuery } from '@tanstack/react-query'

export function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: () => fetch('/api/products').then((r) => r.json()),
    staleTime: 60_000,
  })
}

All components calling useProducts() within the same render cycle share one fetch.

• ID: performance-deep-dive.network-waterfall.request-deduplication

• Severity: low

• What to look for: Count all components that fetch the same API endpoint. Enumerate whether concurrent requests are deduplicated by a library (React Query, SWR) or custom cache. Check for request deduplication patterns in the codebase. Look for request caching at the fetch layer or API client library. Verify that concurrent requests for the same URL/resource result in a single fetch with results shared across requests.

• Pass criteria: Concurrent requests for identical resources are deduplicated. In-flight requests are merged so multiple callers share a single network request. Deduplication library or pattern is used (e.g., React Query, SWR, or custom request caching). At least 1 deduplication mechanism must be in use.

• Fail criteria: Concurrent requests for the same resource trigger multiple network requests. No deduplication mechanism detected.

• Skip (N/A) when: Never — request deduplication applies to all applications with multiple components fetching data.

• Cross-reference: For API caching strategy, see stale-while-revalidate-apis.

• Detail on fail: "No request deduplication — calling the same API endpoint from 3 components triggers 3 network requests instead of 1" or "React Query not configured — requests not deduplicated"

• Remediation: Implement request deduplication using a library like React Query, SWR, or a custom fetch wrapper that caches in-flight requests.

  // lib/queries.ts — React Query deduplicates by key
  import { useQuery } from '@tanstack/react-query'
  export function useProducts() { return useQuery({ queryKey: ['products'], queryFn: fetchProducts }) }