Building Interactive Async UI with React 19 and Ariakit
summary
A demo converts a fragile custom account selector into an accessible, interactive component using React 19, Next.js App Router, and Ariakit: replace nameless divs with Ariakit primitives for keyboard, click-outside and smart popover positioning; use useTransition & useOptimistic for synced loading spinners and automatic optimistic rollback; call server functions replacing API endpoints to set cookies, revalidate server components and emit server-side toasts — fewer lines of client code and no accessibility boilerplate.
AI-written summary · about
chapters (16)
- 0:00Async UI with React 19 and Ariakit
- 1:04Problematic account selector demo
- 2:29Challenges in accessible UI
- 5:20Ariakit for accessible components
- 8:12Replacing divs with Ariakit primitives
- 11:26Ariakit benefits for UI
- 11:47Async ops with React 19 transitions
- 13:17Server functions for API calls
- 14:23Toast logic for cross-page navigation
- 15:27Optimistic updates with useOptimistic
- 17:38Error handling in async UI
- 18:01Logout button with server function
- 19:06Login form with React 19 actions
- 20:11Improved account selector demo
- 21:35Key takeaways
- 22:38Resources and closing
related talks
24m2025 10 03 03 AURORA SCHARFF CONGRESO REACT ALICANTE The international React js conference in Spa
23mOptimistic UI updates with Apollo Client and React
35mBuilding reusable UI libraries with React
40mAccessibility-flavored React components make your design system delicious
30mReact Unpacked A Roadmap to React 19
32mEvyatar Alush @ ReactNext '25
43mAsync
52mA11y with React Components