How does initialScrollIndex work with async data?

[maxRN]

According to the docs: https://legendapp.com/open-source/list/v3/api/#initialscrollindex

If data arrives after mount, the initial target is re-armed and applied when items are available.
I would assume that it "just works", i.e. I can pass a scrollIndex and after the data arrives it will automatically adjust the scroll to match. Does this also work if the scrollIndex is not known ahead of time?
So this is my use case:

1. I fetch some data from the backend.
2. While we have no data I show a loading / empty state.
3. Once we have the data I can compute the scrollIndex, but until the data arrives the index is undefined.

Now I would expect that once the data has finished fetching, that the scroll adjusts automatically, but that didn't happen in my tests. Am I using it wrong? What is the alternative? Using useEffect and scroll the ref?

[krotname]

initialScrollIndex needs to exist when the list is initialized. The async-data behavior in the docs is for this shape:

<LegendList data={[]} initialScrollIndex={someKnownIndex} />

then later data becomes non-empty and the existing initial target can be replayed.

If initialScrollIndex is undefined on the first render, the list does not create an initial scroll target/session. In the source, hasInitialScrollIndex is only true when the prop is not undefined/null, and ctx.state.initialScroll is initialized from that value only when the internal state is first created.

So for your case, these are the practical options:

// 1. Render the list only once data + index are known
if (!data || scrollIndex == null) return <Loading />;

return <LegendList data={data} initialScrollIndex={scrollIndex} />;

or remount the list when the initial target becomes known:

<LegendList
  key={scrollIndex == null ? "loading" : `target-${scrollIndex}`}
  data={data}
  initialScrollIndex={scrollIndex ?? 0}
/>

or use the ref after async data/index are ready:

useEffect(() => {
  if (data.length && scrollIndex != null) {
    listRef.current?.scrollToIndex({ index: scrollIndex, animated: false });
  }
}, [data.length, scrollIndex]);

If the target index is known before the data arrives, pass it up front. If the target can only be computed from the fetched data, the ref/effect approach is usually the clearest because it is no longer really an initial scroll target.

[maxRN]

useEffect seems like the most performant solution, but didn't work reliably in my testing. I ended up using render key.

EDIT: Actually it seems animated: true doesn't play well when used with useEffect and the list has just mounted. With animated: false it works reliably, but with it set to true it doesn't appear to do anything. Not sure if that's a bug though.

[jmeistrich]

@krotname was right, but that felt very messy to me. So in 3.0.7 I fixed it so that it will use the value of initialScrollIndex at the time that data gets populated.

And also, doing a scrollToIndex in an effect will not work well. There's a very complex initial bootstrap window where items are still laying out and measuring, and adjusting positions to match the initial scroll, and a manual scroll in there will cause problems.

So ideally you can just update to 3.0.7 and initialScrollIndex will work as expected, and you can remove the useEffect.