Description

Implement request deduplication to prevent duplicate API calls when multiple components mount concurrently and request the same data.

Problem

When multiple components using useProgressiveRepoData or similar hooks mount at the same time, they can trigger duplicate API requests for the same data. This wastes bandwidth and can impact performance.

Solution Approach

1. Request Cache/Registry

interface PendingRequest {
  key: string;
  promise: Promise<any>;
  timestamp: number;
}

class RequestDeduplicator {
  private pending = new Map<string, PendingRequest>();
  
  async dedupe<T>(key: string, fetcher: () => Promise<T>): Promise<T> {
    // Check for pending request
    const existing = this.pending.get(key);
    if (existing && Date.now() - existing.timestamp < 5000) {
      return existing.promise;
    }
    
    // Create new request
    const promise = fetcher();
    this.pending.set(key, { key, promise, timestamp: Date.now() });
    
    // Clean up after completion
    promise.finally(() => this.pending.delete(key));
    
    return promise;
  }
}

Implementation Tasks

• Create RequestDeduplicator utility class
• Integrate with data fetching hooks
• Add request key generation based on parameters
• Implement TTL for cached pending requests
• Add tests for concurrent request scenarios
• Monitor and log deduplication metrics

Acceptance Criteria

• Concurrent requests for identical data only trigger one API call
• Subsequent requests wait for and share the result
• Request cache has appropriate TTL
• No memory leaks from cached promises
• Performance metrics show reduction in duplicate requests

Related

• PR: Phase 2: Data Loading Optimizations for Core Web Vitals #282 (Phase 2 Data Loading Optimizations)
• Could complement React Query/SWR if adopted later