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.