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.

Angular Developer

Picnic Technologies B.V.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Balancing the trade-off between efficiency and resilience
03:38 MIN

Balancing the trade-off between efficiency and resilience

What 2025 Taught Us: A Year-End Special with Hung Lee

The future of recruiting beyond talent acquisition
03:15 MIN

The future of recruiting beyond talent acquisition

What 2025 Taught Us: A Year-End Special with Hung Lee

Why HR struggles with technology implementation and adoption
04:22 MIN

Why HR struggles with technology implementation and adoption

What 2025 Taught Us: A Year-End Special with Hung Lee

Why corporate AI adoption lags behind the hype
03:28 MIN

Why corporate AI adoption lags behind the hype

What 2025 Taught Us: A Year-End Special with Hung Lee

Breaking down silos between HR, tech, and business
03:39 MIN

Breaking down silos between HR, tech, and business

What 2025 Taught Us: A Year-End Special with Hung Lee

Moving beyond headcount to solve business problems
04:27 MIN

Moving beyond headcount to solve business problems

What 2025 Taught Us: A Year-End Special with Hung Lee

Automating formal processes risks losing informal human value
03:48 MIN

Automating formal processes risks losing informal human value

What 2025 Taught Us: A Year-End Special with Hung Lee

Featured Partners

Related Videos

See all videos
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 in React Application30:07

Accessibility in React Application

Julia Undeutsch

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

View-Transition-API: Gamechanger for hybrid app-development24:17

View-Transition-API: Gamechanger for hybrid app-development

Sascha Lehmann

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Accessibility with Web Components25:33

Accessibility with Web Components

Manuel Mauky

Challenges of building React and React Native apps24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

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

From learning to earning

Jobs that call for the skills explored in this talk.