Implement Robust Frontend API Integration Patterns

Frontend API Integration Patterns provides production-ready patterns for connecting frontend apps to backend APIs, focused specifically on the fact that most frontend bugs come not from calling the API but from mishandling asynchronous behavior - race conditions, stale data, duplicated requests, and poor UX. The focus is correctness, resilience, and user experience, not just making the call work.

Six core patterns are provided as working code. An API layer (separation of concerns) centralizes API logic behind an apiClient function and a custom ApiError class carrying message, HTTP status, and payload, normalizing both HTTP-level failures and empty (204) responses. Race-safe state management uses a cancelled flag inside a useEffect cleanup to stop a stale response from overwriting fresher state, with a note that AbortController is the better tool specifically for network requests. Request cancellation shows the AbortController pattern directly - creating a controller per effect run, passing its signal into the fetch, aborting on cleanup, and treating AbortError as a no-op rather than a real error. Retry with exponential backoff (fetchWithBackoff) retries only transient failures - explicitly excluding AbortError and any HTTP status under 500 - doubling the delay plus jitter between attempts. Debounced API calls use a useDebounce hook to delay a value update (e.g. a search input) until it stops changing for a set interval. Request deduplication uses an in-flight Map keyed by request identity so concurrent callers share one in-flight promise instead of firing duplicate calls.

Three worked examples combine these patterns: an ML prediction call that aborts any previous in-flight request before firing a new one and wraps the call in exponential backoff; a debounced search that combines useDebounce with AbortController and ignores AbortError in the catch handler; and an optimistic UI delete that removes the item from state immediately, then rolls back and shows an error if the DELETE call fails.

Best practices: centralize API logic in a dedicated layer, normalize errors with a custom error class, always handle loading/error/success states explicitly, use AbortController for cancellation, retry only 5xx/transient failures, debounce input-driven APIs, and deduplicate identical requests. Anti-patterns called out: retrying 4xx errors, skipping request cancellation (memory leaks), race-condition-prone state updates, silently swallowing errors, a single global loading/error state shared across unrelated requests, and calling APIs directly and repeatedly inside components instead of through a shared layer. A pitfalls table maps five common symptoms to their fix: stale UI data to cancellation/guarding against outdated responses, excessive calls on input to debouncing plus cancellation, duplicate requests from multiple components to deduplication, server overload during retries to exponential backoff, and state updates after unmount to AbortController cleanup.

Use this skill when connecting frontend apps (React, React Native, Vue, etc.) to backend APIs, integrating ML/AI endpoints (/predict, /recommend), handling asynchronous data in the UI, fixing stale data/flickering UI/duplicate requests, or designing a scalable frontend API layer. These are vanilla JavaScript patterns - adapt them to your framework's data-fetching library (React Query, SWR, Apollo, Relay) rather than reimplementing them by hand if one is already in use. Do not retry non-idempotent mutations unless the backend provides idempotency keys or another duplicate-safe contract, and never expose privileged API keys in frontend code - proxy sensitive requests through a backend instead. Do not treat the output as a substitute for environment-specific validation, testing, or expert review, and stop to ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Frontend engineers building or debugging API integration layers - especially those hitting race conditions, stale UI state, duplicate requests, or retry-storm issues - who want working cancellation, backoff, debounce, and deduplication patterns rather than raw fetch calls scattered through components.