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

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

Accessibility with Web Components
25:33

Accessibility with Web Components

Manuel Mauky

ARIA: the good parts
55:32

ARIA: the good parts

Hidde de Vries

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

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

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Related Articles

View all articles
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
Daniel Cranney
Next.js App Router: Explained
IntroductionVercel’s Next.js has come a long way since its initial release in 2016. What would become the most popular React framework (according to their own website, at least), started as a simple solution for handling routing, SEO optimisation and...
Next.js App Router: Explained
Eli McGarvie
Top 10 Svelte UI Libraries in 2025
As Svelte gains traction among developers for its impressive performance and simplicity, the need for robust UI libraries becomes increasingly apparent. UI libraries can provide developers with the necessary building blocks to easily create beautiful...
Top 10 Svelte UI Libraries in 2025

From learning to earning

Jobs that call for the skills explored in this talk.