Async Data Loading
Async data loading patterns provide clear guidelines for implementing components that fetch data from remote sources. These patterns ensure consistent user experience across <ComboBox>, <Autocomplete>, and other interactive components that work with dynamic data.
Usage
There are two main approaches for async data loading:
useAsyncList: Built-in filtering and loading states, perfect for search-as-you-type functionality.
React Query: Advanced caching with automatic request deduplication, ideal for complex data needs.
useAsyncList (Recommended)
For most async data loading scenarios, we recommend using useAsyncList from @react-stately/data.
This hook is specifically designed for handling async data in lists and provides built-in loading states, error handling, and filtering capabilities.
You can also prefetch initial options on component mount to ensure data is immediately available when users interact with the component.
Handle empty states when no data is available or search returns no results.
useAsyncList handles the complexity of async data management automatically and integrates seamlessly with Marigold components. For more detailed examples and advanced usage, see our useAsyncList documentation.
React Query
React Query provides automatic caching, request deduplication, and built-in loading states for async data. Use when you need sophisticated caching strategies.
It also supports prefetching data on component mount or during user interactions.