API cookbook

Real-time pricing in a React workspace

Debounced live pricing as the user types, with TanStack Query, idempotency, and proper error UX.

RTBy RateStack TeamPublished2026-04-10Reviewed2026-04-10

intermediateTypeScript · React

function usePricing(input: LoanInput) {
  const debouncedInput = useDebounce(input, 250);
  return useQuery({
    queryKey: ["pricing", debouncedInput],
    queryFn: ({ signal }) =>
      fetch("/api/proxy/v1/pricing/eligibility", {
        method: "POST",
        signal,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(debouncedInput),
      }).then((r) => r.json()),
    enabled: isValidForPricing(debouncedInput),
    staleTime: 5_000,
  });
}

Use Stage 1 eligibility (cheap) for live updates; switch to Stage 2 full pricing when the LO clicks "get quotes." This keeps the UX responsive without overrunning the rate limit.

All recipes