World Congress 2025 • Aug 20, 2025 • Session details

Building Interactive Async UI with React 19 and Ariakit

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 · WWC 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 · WWC 2024

1:10 min

Creating interactive visual experiences with pure frontend code

Chris Heilmann +2 · LIVE

3:26 min

Leveraging existing web knowledge for developer experience

Xuan Huang

Xuan Huang · WWC 2025

3:34 min

Enhancing screen reader support with ARIA design patterns

Konstantin Tieber · WWC 2022

More from World Congress 2025

GenAI Security: Navigating the Unseen Iceberg thumbnail

GenAI Security: Navigating the Unseen Iceberg

Maish Saidel-Keesing

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

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

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

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

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

AI Sovereignty: What Does It Take?

Boris Hecker, Clemens Wasner, Robin Hermann, Sonja Alvarez

Upcoming sessions on this topic

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris

World Congress 2026 North America

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Paweł Matynia, Bartosz Leczycki

Paweł Matynia

Bartosz Leczycki

Related videos

Accessibility in React Application thumbnail

LIVE • over 1 year ago

Accessibility in React Application

Julia Undeutsch

Making Interactions Accessible to All Users thumbnail

WWC 2023 • almost 3 years ago

Making Interactions Accessible to All Users

Anuradha Kumari

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

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

LIVE • about 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

WWC 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

WWC 2022 • about 4 years ago

Challenges of building React and React Native apps

Milica Aleksic, Stefan Nikolic

Related articles

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...

9 months ago

HTML elements mocked up with their code

DC

Daniel Cranney

3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents

If you’ve ever read the WeAreDevelopers Magazine before, you’ll know we love showing developers how to take advantage of native platform features and avoid over-engineering UI’s with frameworks or ...

7 months ago

A woman on a laptop with a table of contents showing on the screen

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. Whi...

almost 3 years ago

16 Best Free React UI Libraries in 2025

CH

Chris Heilmann

Dev Digest 133 - Back to Front

News and ArticlesWeAreDevelopers LIVE WebDev Day is on Wednesday, 18/11/2024. Learn about Design-first APIs for UI components, the JavaScript event loop, the Secret sauce behind pattern matching an...

almost 2 years ago

Dev Digest 133 - Back to Front

From learning to earning

Jobs that call for the skills explored in this talk.

React Engineer For Next.Js Ui - Hybrid, Impactful Fintech

Next.js ReactJS Backend

React Engineer for Next.js UI - Hybrid, Impactful FinTech

Barcelona, Spain

€55k–85k Next.js ReactJS TypeScript

about 1 month ago

Junior Frontend Engineer

Berlin, Germany

Starter €60k–75k NestJS ReactJS Backend

Senior Software Engineer, React (Investing & Trading)

Remote Next.js ReactJS Caching

Software Engineer, React & Angular (Broker Web Platform

Barcelona, Spain

Remote Next.js ReactJS Backend

Software Engineer

Barcelona, Spain

Remote Next.js ReactJS Caching