Aurora Scharff

Building Interactive Async UI with React 19 and Ariakit

Forget complex state management for async UI. Use React 19's `useOptimistic` hook for instant feedback with automatic rollback on error.

Building Interactive Async UI with React 19 and Ariakit
#1about 1 minute

Challenges of building custom interactive UI components

Three common problems are outlined: building custom UI from scratch, ensuring accessibility without being an expert, and handling async operations smoothly.

#2about 1 minute

Solving UI challenges with a modern tech stack

The solution involves using Tailwind CSS for styling, Ariakit for accessible component primitives, and React 19 features for managing asynchronous operations.

#3about 4 minutes

Analyzing the initial flawed component and its code

A demonstration and code walkthrough reveal a custom dropdown with accessibility issues, complex state management, and out-of-sync pending states.

#4about 7 minutes

Refactoring the UI with Ariakit for accessibility

The component is refactored by replacing standard divs with Ariakit's `Select` primitives, which automatically handle state, keyboard navigation, and ARIA attributes.

#5about 2 minutes

Managing async state with React 19 hooks

The component's asynchronous logic is improved by replacing manual pending states with `useTransition` and `useOptimistic` for smooth, instant UI feedback and automatic rollbacks.

#6about 4 minutes

Simplifying data updates with server functions

The traditional API layer is removed and replaced with React Server Functions, enabling direct, type-safe server calls from the client component.

#7about 2 minutes

Demonstrating the final interactive and accessible component

The final result is a fully interactive, accessible, and user-friendly dropdown component with smooth pending states and optimistic updates, built with minimal boilerplate.

#8about 3 minutes

Summary of benefits from Ariakit and React 19

A recap of how Ariakit provides accessibility and clean code, while React 19 streamlines server communication and simplifies loading states for a better user experience.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Summary of key principles for accessible React apps
28:43 MIN

Summary of key principles for accessible React apps

Accessibility in React Application

Using ARIA attributes to make web components accessible
09:19 MIN

Using ARIA attributes to make web components accessible

Accessibility with Web Components

Implementing effective focus management strategies in React
15:23 MIN

Implementing effective focus management strategies in React

Accessibility in React Application

Common accessibility challenges in React SPAs
01:03 MIN

Common accessibility challenges in React SPAs

Accessibility in React Application

Building with familiar React APIs and real CSS
03:03 MIN

Building with familiar React APIs and real CSS

Lynx: Native for More

Integrating UI components and choosing a rendering mode
23:49 MIN

Integrating UI components and choosing a rendering mode

One Framework To Rule Them All: Faster Websites With Astro

Combining micro frontends with an islands architecture
27:46 MIN

Combining micro frontends with an islands architecture

Multiple Ships to the Island - Micro Frontends & Island Architectures

A detailed breakdown of modern web frameworks
27:03 MIN

A detailed breakdown of modern web frameworks

Web development best practices in 2021

Featured Partners

Related Videos

See all videos
Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

What’s New and What’s Next in Web UI22:46

What’s New and What’s Next in Web UI

Cleyra Uzcategui

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners29:01

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

Marius Obert

Accessibility with Web Components25:33

Accessibility with Web Components

Manuel Mauky

Beyond Warp Speed: Crafting the Future of Web Development with Astro 4.1024:33

Beyond Warp Speed: Crafting the Future of Web Development with Astro 4.10

Francesco Napoletano

Challenges of building React and React Native apps24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

ARIA: the good parts55:32

ARIA: the good parts

Hidde de Vries

GraphQL + Apollo + Next.js: A Lovely Trio40:45

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
Inside last week’s Dev Digest 190 . 🙅 Developers don’t trust AI, and that’s a good thing 🤖 Why everyone is talking about AI agents 🔓 Autonomous AI hacking and the future of cyber security 😨 Windows 10 support ends, millions of PC’s fall off a securi...
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
AM
Ashutosh Mishra
16 Best Free React UI Libraries in 2025
Web development is moving incredibly fast. New features pop up all the time, but there's one constant issue that keeps coming up: keeping your app's interface looking attractive and impressive. While new features are born and killed as the project gr...
16 Best Free React UI Libraries in 2025
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.