Three common problems are outlined: building custom UI from scratch, ensuring accessibility without being an expert, and handling async operations smoothly.
The solution involves using Tailwind CSS for styling, Ariakit for accessible component primitives, and React 19 features for managing asynchronous operations.
A demonstration and code walkthrough reveal a custom dropdown with accessibility issues, complex state management, and out-of-sync pending states.
The component is refactored by replacing standard divs with Ariakit's `Select` primitives, which automatically handle state, keyboard navigation, and ARIA attributes.
The component's asynchronous logic is improved by replacing manual pending states with `useTransition` and `useOptimistic` for smooth, instant UI feedback and automatic rollbacks.
The traditional API layer is removed and replaced with React Server Functions, enabling direct, type-safe server calls from the client 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.
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.
Sensory-Minds GmbH
Offenbach am Main, Germany
Hubert Burda Media
München, Germany
30:07Julia Undeutsch
22:46Cleyra Uzcategui
29:01Marius Obert
24:10Milica Aleksic & Stefan Nikolic
25:33Manuel Mauky
24:33Francesco Napoletano
55:32Hidde de Vries
40:45Josh Goldberg
Jobs that call for the skills explored in this talk.
Turboneer LLC
Mount Morris, United States of America
Jobriver Hr Service
Berlin, Germany
Jobriver Hr Service
Berlin, Germany
Client Server
Burnham, United Kingdom