Make useAsyncList support a dependency list
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🙋 Feature Request
I would like [`useAsyncList`](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) to support a dependency list, similar to that of `useEffect`, `useCallback`, `useMemo`, etc. This can be handy when certain parent component state variables change, which would impact the underlying async data fetch call that is made from within `useAsyncList`.
## 🤔 Expected Behavior
`useAsyncList` accepts a list of dependencies in an array, with a mechanism similar to that of the `useEffect` Hook.
## 😯 Current Behavior
`useAsyncList` does not support a dependency list.
## 💁 Possible Solution
As a workaround, a `useEffect` with the necessary dependency list can be used alongside the `useAsyncList` Hook to manage the change in the parent component state variable, and call the [`reload`](https://react-spectrum.adobe.com/react-stately/useAsyncList.html#reloading-data) function to trigger data load.
## 🔦 Context
Some data fetch API calls may require a user's auth token. In situations where the auth token is computed asynchronously, or fetched on the fly, that authToken may not be immediately available during the very initial data load of `useAsyncList`, which would cause the data fetch to fail. Having `useAsyncList` support a dependency list where that auth token can be added would help conditionally make the data fetch inside `useAsyncList`.
## 💻 Examples
```tsx
function Example() {
const authToken = useAuthToken(); // Some contrived Hook that gives back the current user's auth token
const list = useAsyncList({
async load({ signal }) {
// The fetch call requires an authToken,
// so we don't want to call it without one
if (authToken === null) {
return {
items: []
};
}
const res = await fetch(
'https://some.api/call',
{ signal, headers: { 'Authorization': authToken } }
);
const json = await res.json();
return {
items: json.results,
cursor: json.next
};
}
});
useEffect(() => {
if (authToken !== null) {
list.reload();
}
}, [authToken]);
}
```
## 🧢 Your Company/Team
Adobe/RSP
Contributor guide
Research direction
Start with the useAsyncList API and its reloading-data documentation linked in the issue. Review how the existing load callback and reload behavior relate to changing parent state, then determine the dependency-list API and its expected initial-load and reload semantics. Done means dependent values trigger the intended data fetch without the workaround shown in the issue, with behavior documented and tested.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100