WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2025 • Aug 20, 2025 • Session details

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Tired of wrestling with complex async states and accessibility bugs? Watch this Next.js refactoring masterclass to build robust, flicker-free components using React 19 and Ariakit.

Pause
Mute Enter Fullscreen
#1 about 3 min

Overcoming challenges in building accessible interfaces

Understanding the difficulties of delivering custom design capabilities while meeting strict WCAG standards and preventing asynchronous UI flickering.

#2 about 2 min

Exploring tooling choices for interactive UI components

Combining Tailwind CSS, Ariakit primitives, and React concurrent features to streamline flexible component development.

#3 about 2 min

Identifying usability flaws in the initial component

Reviewing an initial design implementation to expose broken keyboard navigation and disconnected asynchronous fetching states.

#4 about 2 min

Analyzing the initial monolithic component setup

Breaking down a tangled component hierarchy structured around manual state tracking and detached API endpoints.

#5 about 7 min

Refactoring components for accessibility compliance with Ariakit

Swapping generic elements with unstyled Ariakit primitives to automatically coordinate complex accessibility interactions and layout behaviors.

#6 about 4 min

Eliminating boilerplate with React 19 server functions

Handling asynchronous operations smoothly by replacing endpoint fetching layers with server actions triggered via the useTransition hook.

#7 about 2 min

Engineering instant UI feedback using optimistic state

Applying the useOptimistic hook to provide immediate visual responses combined with robust automatic error rollback functionality.

#8 about 3 min

Rapidly iterating on custom asynchronous interface features

Expanding the application cleanly by dropping in a fully interactive logout sequence configured over the same server architecture.

#9 about 3 min

Summarizing modern patterns for robust interactive components

Reflecting on how unified framework paradigms drastically reduce boilerplate code while actively elevating final product accessibility.

Matching moments

44 sec

Constructing basic UI components using React hooks

Marc Rousavy Marc Rousavy · World Congress 2025

3:08 min

Fundamentals of building interfaces with React

Daisy Muyldermans · LIVE

2:04 min

Advancing design tools for modern frontend development requirements

Kris Rasmussen Kris Rasmussen +1 · World Congress 2024

1:10 min

Creating interactive visual experiences with pure frontend code

Chris Heilmann Chris Heilmann +2 · LIVE

3:26 min

Leveraging existing web knowledge for developer experience

Xuan Huang Xuan Huang · World Congress 2025

3:34 min

Enhancing screen reader support with ARIA design patterns

Konstantin Tieber · World Congress 2022

More from World Congress 2025

GenAI Security: Navigating the Unseen Iceberg thumbnail
24:33
11 months ago

GenAI Security: Navigating the Unseen Iceberg

Maish Saidel-Keesing

Behind the Code: How Women Are Powering the Future of AI thumbnail
30:28
about 1 year ago

Behind the Code: How Women Are Powering the Future of AI

Alexandra Wudel, Laura Moritz, Madalina Florean

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise? thumbnail
28:12
about 1 year ago

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise?

Justus Lumpe, Konstantin Vinogradov, Nils Eiteneyer, Stephan Wirris

AI in Leadership: How Technology is Reshaping Executive Roles thumbnail
28:19
about 1 year ago

AI in Leadership: How Technology is Reshaping Executive Roles

Bernd Datler, Jasmin Kaiser, Jeff Hausmann, Sonja Alvarez

The AI-Ready Stack: Rethinking the Engineering Org of the Future thumbnail
28:09
about 1 year ago

The AI-Ready Stack: Rethinking the Engineering Org of the Future

Alex Laubscher, Jan Oberhauser, Keno Dreßel, Mirko Novakovic

AI Sovereignty: What Does It Take? thumbnail
29:13
about 1 year ago

AI Sovereignty: What Does It Take?

Boris Hecker, Clemens Wasner, Robin Hermann, Sonja Alvarez

Related videos

Accessibility in React Application thumbnail
30:07
LIVE • almost 2 years ago

Accessibility in React Application

Julia Undeutsch

Making Interactions Accessible to All Users thumbnail
31:38
World Congress 2023 • about 3 years ago

Making Interactions Accessible to All Users

Anuradha Kumari

Typescript, React and Atomic Design - a match made in heaven thumbnail
40:05
LIVE • over 5 years ago

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more thumbnail
1:02:33
LIVE • over 1 year ago

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more

Chris Heilmann, Daniel Cranney, Elena Torró

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners thumbnail
29:01
World Congress 2023 • almost 3 years ago

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

Marius Obert

Challenges of building React and React Native apps thumbnail
24:10
World Congress 2022 • over 4 years ago

Challenges of building React and React Native apps

Milica Aleksic, Stefan Nikolic

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.