"Building Interactive Async UI with React 19 and Ariakit", Aurora Scharff

Handling async operations in UI components can be tricky—flickering pending states, inefficient state updates, and unstable user experiences are common issues. Building accessible UI components presents additional challenges, as meeting accessibility requirements often requires extra effort, which can add complexity to the development process. In the context of the Next.js App Router, this session will demonstrate how React Server Components streamline data fetching, while other React 19 tools help manage mutations, loading states, and optimistic updates more effectively. We’ll combine these with Ariakit to simplify the process of building interactive, accessible UI components with less boilerplate. You’ll leave with practical strategies for managing async operations while ensuring a smooth, reliable user experience.

1. Building Interactive Async
UI with React 19 and Ariakit
Aurora Scharff
@aurorascharff

2. Aurora Scharff
Oslo, Norway
Senior Consultant
@ Crayon Consulting
React Certification Lead @
certificates.dev

3. What inspired this talk?

5. What inspired this talk?
Problem
Creating custom UI
components from
scratch
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19

7. https://www.w3.org/WAI/standards-guidelines/wcag/

8. What inspired this talk?
Problem
Creating custom UI
components from
scratch
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19

9. What inspired this talk?
Problem
Creating custom UI
components from
scratch
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19

10. https://react.dev/reference/react/useTransition#perform-non-blocking-updates-with-actions

11. What inspired this talk?
Creating custom UI
components from
scratch
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution

12. What inspired this talk?
Creating custom UI
components from
scratch
TailwindCSS
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution

13. https://tailwindcss.com/blog/tailwindcss-v4

14. What inspired this talk?
Creating custom UI
components from
scratch
TailwindCSS
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution

15. What inspired this talk?
Creating custom UI
components from
scratch
TailwindCSS
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution

16. https://ariakit.org/

17. What inspired this talk?
Creating custom UI
components from
scratch
TailwindCSS
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution

18. What inspired this talk?
Creating custom UI
components from
scratch
TailwindCSS
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution

20. Creating custom UI
components from
scratch
TailwindCSS
Meeting accessibility
requirements without
writing the code
yourself
Ariakit
Handling
asynchronous
operations smoothly
without excess code
React 19
Problem
Solution
What inspired this talk?

21. DEMO

22. What did we achieve…
…with Ariakit?
Accessible, interactive components
following WCAG 2standard
Custom styling with data-and aria-
attributes using i.e., TailwindCSS
Declarative and composable component
code without boilerplate
…with React 19?
Streamlined data mutations using Server
Functions
Smooth interactions and simplified
loading states with Actionsand
useTransition()
Instant user feedback and error rollback
with useOptimistic()

23. What did we achieve…
…with Ariakit?
Accessible, interactive components
following WCAG 2standard
Custom styling with data-and aria-
attributes using i.e., TailwindCSS
Declarative and composable component
code without boilerplate
…with React 19?
Streamlined server communication using
Server Functions
Smooth interactions and simplified
loading states through Actionswith
useTransition()
Instant user feedback and “error
rollback” with useOptimistic()

25. https://github.com/aurorascharff
/next15-account-selector

27. THANK YOU
@aurorascharff
aurorascharff.no
@aurorascharff