Components: resetting an asynchronous action

Reviewed September 6, 2026.

The catalog’s useAsyncAction hook records idle, pending, success and error. Two refs protect the interface: a phase prevents duplicate pending actions, and a run identifier prevents an old promise from settling a newer interaction.

Reset while pending

Reset increments the run identifier. When a promise resolves, its saved identifier must still match before the hook changes state. An unmounted component also ignores settlement.

Reset does not cancel

The promise still runs. This hook has no abort-signal contract. If an operation changes a server, resetting the button does not undo that change or establish whether it completed.

In a UI

Announce the visible status, expose pending with aria-busy, and make error recovery understandable. Use the underlying operation’s cancellation mechanism when cancellation is actually required.

Sources

• src/components/interior/loading-button.tsx, Components catalog, base 3fcc910
• Catalog
• Project
• Run the actual hook with a simulated promise
• Related: index-replies