AsyncFlowStatePredictable Async UI Behavior
Eliminate boilerplate, prevent double submissions, and ship polished async UX — across React, Vue, Svelte, Angular, Solid & Next.js.
Skip to content
Learn about concurrency →Learn about retries → API Reference → Ship flawless async UX
The Problem
You've written this code hundreds of times.
Every async action needs loading states, error handling, double-click prevention, and accessibility. AsyncFlowState handles all of it in one hook.
Before — 34 lines of boilerplate
tsx
function SaveButton({ data }) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [submitted, setSubmitted] = useState(false);
const handleClick = async () => {
if (loading) return; // manual double-click guard
setLoading(true);
setError(null);
try {
await api.save(data);
setSubmitted(true);
toast.success("Saved!");
} catch (err) {
setError(err.message);
toast.error(err.message);
} finally {
setLoading(false);
}
};
return (
<>
<button
onClick={handleClick}
disabled={loading}
aria-busy={loading}
aria-disabled={loading}
>
{loading ? "Saving..." : "Save"}
</button>
{error && <p role="alert">{error}</p>}
</>
);
}After — 10 lines with AsyncFlowState
tsx
function SaveButton({ data }) {
const flow = useFlow(async () => api.save(data), {
onSuccess: () => toast.success("Saved!"),
onError: (err) => toast.error(err.message),
});
return (
<>
<button {...flow.button()}>{flow.loading ? "Saving..." : "Save"}</button>
{flow.error && (
<p ref={flow.errorRef} role="alert">
{flow.error.message}
</p>
)}
</>
);
} Loading state — automatic Double-click prevention — built in ARIA attributes — generated Error focus management — handled
Core Engine
Everything your async flows need.
20+ production-grade features. Zero runtime dependencies. One API surface across all frameworks.
Concurrency Control
Behavioral Orchestration
Control overlapping requests with professional concurrency strategies. No more race conditions or manual isLoading flags.
Exhaust
Block while active
Switch
Cancel & restart
Enqueue
Process in order
Resilience
Self-Healing Retry Engine
Automatic retry with exponential backoff, randomized jitter, and circuit breaker patterns. Failed operations recover without flooding your backend.
Backoff
Exponential delay
Jitter
Prevent stampedes
Circuit Breaker
Stop cascading
Optimistic UI
Instant UI updates with automatic rollback on failure. Users see results before the server responds.
Learn more →Global Undo
Purgatory state holds operations in limbo. Give users a grace period to undo before commit.
Learn more →Streaming
Native AsyncIterable and ReadableStream support for AI chat, live feeds, and SSE.
Cross-Tab Sync
Flow states sync across tabs via BroadcastChannel. One tab completes — all tabs update.
Learn more →Smart Persistence
Resume interrupted operations across page refreshes with localStorage/sessionStorage persistence.
Learn more →Middleware & Interceptors
Add logging, analytics, auth-token injection, and request transforms with global or per-flow middleware.
Learn more →Visual Debugger
Real-time timeline/Gantt view of all async activity. Time-travel through state transitions for debugging.
Learn more →See It In Action
Concurrency strategies, visualized.
Watch how exhaust, switch, and enqueue handle overlapping user clicks in real time. No custom logic required.
Exhaust — Blocks new calls while one is active. For payments and form submissions.
Switch — Cancels active and restarts. For search and autocomplete.
Enqueue — Queues in order. For file uploads and batch operations.
User Clicks
keep
restart
enqueue
Resilience Engineering
Failed requests recover.
Network failures are inevitable. AsyncFlowState retries intelligently with backoff, jitter, and circuit breakers — so your users never see a broken state.
Exponential backoff — Progressively longer delays between attempts.
Circuit breaker — Halts retries after repeated failures to protect services.
Dead letter queue — Captures permanently failed operations for replay.
Exponential Backoff Simulation
Package Ecosystem
One core. Six adapters.
A framework-agnostic engine with native bindings that speak each framework's idiom — hooks, composables, stores, services, and signals.
@asyncflowstate/core
Framework-agnostic state machine engine. The foundation that powers every adapter. Can be used standalone with vanilla JavaScript.
20+
Built-in Features
6
Framework Adapters
0
Runtime Dependencies
100%
TypeScript Coverage
Get started in 30 seconds
Ship flawless async UX
in record time.
Replace fragile state logic with a robust orchestration engine. Experience built-in concurrency control, optimistic updates, and automatic error recovery out-of-the-box.
Type-Safe·Zero Dependencies·MIT Licensed·Enterprise Ready