Query Deduplication

Problem

Multiple components needing the same data fire identical API requests simultaneously. A dashboard with five widgets showing user stats sends five parallel requests for the same user data. The browser network tab fills with duplicate requests, overwhelming the server and wasting bandwidth. Developers manually coordinate which component should fetch data, creating fragile coupling between components.

Solution

Collapse multiple identical requests into a single network call when they’re issued simultaneously. This prevents wasted bandwidth and race conditions from duplicate requests.

Example

This example demonstrates query deduplication where multiple components requesting the same data simultaneously share a single network request.

// Both components request same data simultaneously
function ComponentA() {
  // First component initiates the request
  const { data } = useQuery('user', fetchUser); // Request 1
}

function ComponentB() {
  // Second component joins the same request instead of creating duplicate
  const { data } = useQuery('user', fetchUser); // Deduplicated - uses same request
}

Benefits

• Eliminates duplicate network requests when multiple components need the same data.
• Reduces server load and bandwidth usage significantly.
• Prevents race conditions from multiple requests for the same data.
• Allows components to independently declare data needs without coordination.

Tradeoffs

• Requires a library or infrastructure to handle deduplication automatically.
• Can mask performance issues if components are requesting data inefficiently.
• May delay some components if they wait for a single slow request.
• Adds complexity to the data fetching layer.