Download to read offline
Uploaded byFwdays
"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.
"Building Interactive Async UI with React 19 and Ariakit", Aurora Scharff
- 1. Building Interactive Async UIwith React 19 and Ariakit Aurora Scharff @aurorascharff
- 2. Aurora Scharff Oslo, Norway SeniorConsultant @ Crayon Consulting React Certification Lead @ certificates.dev
- 3. What inspired thistalk?
- 5. What inspired thistalk? 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.
- 8. What inspired thistalk? 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 thistalk? 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.
- 11. What inspired thistalk? 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 thistalk? 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.
- 14. What inspired thistalk? 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 thistalk? 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.
- 17. What inspired thistalk? 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 thistalk? 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 componentsfrom 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.
- 22. What did weachieve… …with Ariakit? Accessible, interactive components following WCAG 2 standard 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 Actions and useTransition() Instant user feedback and error rollback with useOptimistic()
- 23. What did weachieve… …with Ariakit? Accessible, interactive components following WCAG 2 standard 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 Actions with useTransition() Instant user feedback and “error rollback” with useOptimistic()
- 25.
- 27.