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
01:24 MIN

Summary of key principles for accessible React apps

Accessibility in React Application

Handling asynchronicity in UI component testing
03:40 MIN

Handling asynchronicity in UI component testing

How not to test

Leveraging component islands for optimal performance
03:21 MIN

Leveraging component islands for optimal performance

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

Using ARIA attributes to make web components accessible
04:43 MIN

Using ARIA attributes to make web components accessible

Accessibility with Web Components

Implementing effective focus management strategies in React
07:03 MIN

Implementing effective focus management strategies in React

Accessibility in React Application

Common accessibility challenges in React SPAs
03:43 MIN

Common accessibility challenges in React SPAs

Accessibility in React Application

Building with familiar React APIs and real CSS
01:58 MIN

Building with familiar React APIs and real CSS

Lynx: Native for More

An overview of Next.js and its optimization capabilities
03:55 MIN

An overview of Next.js and its optimization capabilities

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Featured Partners

Related Videos

See all videos
Accessibility in React Application
30:07

Accessibility in React Application

Julia Undeutsch

What’s New and What’s Next in Web UI
22:46

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

Cleyra Uzcategui

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

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

Marius Obert

Challenges of building React and React Native apps
24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

Accessibility with Web Components
25:33

Accessibility with Web Components

Manuel Mauky

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

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

Francesco Napoletano

ARIA: the good parts
55:32

ARIA: the good parts

Hidde de Vries

GraphQL + Apollo + Next.js: A Lovely Trio
40:45

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Related Articles

View all articles
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
Inside last week’s Dev Digest 215 . 🗿 Make AI talk like a caveman 🧠 A guide to context engineering for LLMs 🤖 Simon Willison on agentic engineering 🔐 Axios supply chain attack post mortem 🛡️ Designing AI agents to resist prompt injection 🎨 HTML in c...
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
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

From learning to earning

Jobs that call for the skills explored in this talk.