Async Data Loading
Learn how to implement async data loading patterns in interactive components.
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.
Beyond a single component
This page covers loading data into one component. For app-level architecture with React Query (custom hooks, query keys, mutations, optimistic updates and feedback), see the Fetching and Mutations pattern.