useAsyncList returns cursor

[wangzuo]

AsyncListData contains cursor to support hiding "load more button" if there is no more items, such as

let list = useAsyncList({});

// render
list.cursor ? <Button onPress={list.loadMore}>Load more</Button> : null

[LFDanLu]

I'm not certain what the ask is here, is the cursor in the load function as show here insufficient? Mind adding some more context/information?

[wangzuo]

@LFDanLu sorry for the unclear issue, my question is how to get the cursor from last load more request in rendering so I can hide the "load more" button if there is no more items (empty cursor).

[snowystinger]

Could you do something like this?

let [more, setMore] = useState(true);
let list = useAsyncList({
  async load({ signal, cursor }) {
    // If no cursor is available, then we're loading the first page.
    // Otherwise, the cursor is the next URL to load, as returned from the previous page.
    let res = await fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
      signal
    });
    let json = await res.json();
    // logic to set `setMore` to false goes here
    return {
      items: json.results,
      cursor: json.next
    };
  }
});

{more && <Button>LoadMore</Button>

[wangzuo]

Thank you. This is my current solution so I am wondering if any "native" react-stately way since it's common ui pattern.

[LFDanLu]

I see, at the moment @snowystinger's example would be the way to track the cursor. We could potentially provide the cursor as part of the object returned by useAsyncList since we update data.cursor internally but if feels potentially extraneous since the user is the one providing the load function in the first place IMO.