name: frontend-api-integration-patterns\ndescription: \"Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.\"\ncategory: frontend\nrisk: safe\nsource: community\ndate_added: \"2026-04-23\"\nauthor: avij1109\ntags:
\nThis skill provides production-ready patterns for integrating frontend applications with backend APIs.
\nMost frontend issues are not caused by APIs being difficult to call, but by incorrect handling of asynchronous behavior—leading to race conditions, stale data, duplicated requests, and poor user experience.
\nThis skill focuses on correctness, resilience, and user experience, not just making API calls work.
\n/predict, /recommend)Centralize API logic and normalize errors.
\nexport class ApiError extends Error {\n constructor(message, status, payload = null) {\n super(message);\n this.name = \"ApiError\";\n this.status = status;\n this.payload = payload;\n }\n}\n\nexport const apiClient = async (url, options = {}) => {\n const res = await fetch(url, {\n headers: { \"Content-Type\": \"application/json\" },\n ...options,\n });\n\n if (!res.ok) {\n let payload = null;\n try {\n payload = await res.json();\n } catch (_) {}\n\n throw new ApiError(\n payload?.message || \"Request failed\",\n res.status,\n payload\n );\n }\n\n // handle empty responses safely (e.g. 204 No Content)\n if (res.status === 204) return null;\n\n const text = await res.text();\n return text ? JSON.parse(text) : null;\n};\nPrevent stale responses from overwriting fresh data.
\nuseEffect(() => {\n let cancelled = false;\n\n const load = async () => {\n try {\n setLoading(true);\n setError(null);\n\n const result = await getUser();\n\n if (!cancelled) setData(result);\n } catch (err) {\n if (!cancelled) setError(err.message);\n } finally {\n if (!cancelled) setLoading(false);\n }\n };\n\n load();\n\n return () => {\n cancelled = true;\n };\n}, []);\n\n\nUse a cancellation flag for non-fetch async logic. For network requests, prefer AbortController.
\n
Cancel in-flight requests to avoid memory leaks and stale updates.
\nuseEffect(() => {\n const controller = new AbortController();\n\n const load = async () => {\n try {\n const data = await getUser({ signal: controller.signal });\n setData(data);\n } catch (err) {\n if (err.name === \"AbortError\") return;\n setError(err.message);\n }\n };\n\n load();\n return () => controller.abort();\n}, [userId]);\nRetry only transient failures (5xx or network errors).
\nconst sleep = (ms) => new Promise((r) => setTimeout(r, ms));\n\nconst fetchWithBackoff = async (fn, retries = 3, delay = 300) => {\n try {\n return await fn();\n } catch (err) {\n const isAbort = err.name === \"AbortError\";\n const isHttpError = typeof err.status === \"number\";\n const isRetryable = !isAbort && (!isHttpError || err.status >= 500);\n\n if (retries <= 0 || !isRetryable) throw err;\n\n const nextDelay = delay * 2 + Math.random() * 100;\n await sleep(nextDelay);\n\n return fetchWithBackoff(fn, retries - 1, nextDelay);\n }\n};\nAvoid excessive API calls (e.g., search inputs).
\nconst useDebounce = (value, delay = 400) => {\n const [debounced, setDebounced] = useState(value);\n\n useEffect(() => {\n const t = setTimeout(() => setDebounced(value), delay);\n return () => clearTimeout(t);\n }, [value, delay]);\n\n return debounced;\n};\nPrevent duplicate API calls across components.
\nconst inFlight = new Map();\n\nexport const dedupedFetch = (key, fn) => {\n if (inFlight.has(key)) return inFlight.get(key);\n\n const promise = fn().finally(() => inFlight.delete(key));\n inFlight.set(key, promise);\n return promise;\n};\nconst controllerRef = useRef(null);\n\nconst handlePredict = async (input) => {\n controllerRef.current?.abort();\n controllerRef.current = new AbortController();\n\n try {\n const result = await fetchWithBackoff(() =>\n apiClient(\"/predict\", {\n method: \"POST\",\n body: JSON.stringify({ text: input }),\n signal: controllerRef.current.signal,\n })\n );\n\n setOutput(result);\n } catch (err) {\n if (err.name === \"AbortError\") return;\n setError(err.message);\n }\n};\nconst debouncedQuery = useDebounce(query, 400);\n\nuseEffect(() => {\n if (!debouncedQuery) return;\n\n const controller = new AbortController();\n\n searchAPI(debouncedQuery, { signal: controller.signal })\n .then(setResults)\n .catch((err) => {\n if (err.name !== \"AbortError\") {\n setError(\"Search failed. Please try again.\");\n }\n });\n\n return () => controller.abort();\n}, [debouncedQuery]);\nconst deleteItem = async (id) => {\n const previous = items;\n\n setItems((curr) => curr.filter((item) => item.id !== id));\n\n try {\n await apiClient(`/items/${id}`, { method: \"DELETE\" });\n } catch (err) {\n setItems(previous);\n setError(\"Delete failed. Please try again.\");\n }\n};\nProblem: UI shows stale data\nSolution: Use cancellation or guard against outdated responses
\nProblem: Too many API calls on input\nSolution: Use debouncing + cancellation
\nProblem: Duplicate requests from multiple components\nSolution: Use request deduplication
\nProblem: Server overload during retry\nSolution: Use exponential backoff
\nProblem: State updates after component unmount\nSolution: Use AbortController cleanup
\n