Endless scrolling in React Native - rerenders entire list

[Svarto]

Hi,

I am just getting started with urql and moving over from Apollo. Really love urql so far, really nice job!

I am trying to implement endless scrolling in my app, and while I can get the data to be fetched correctly (with simplePagination), everytime it rerenders the entire list instead of keeping the previous results and just adding the new items. I believe it is because each time it fetches new data, then it saves it as a separate data structure in the normalized cache (e.g. first time it is recipe(limit: 5, offset: 0), second time it is recipe(limit:5, offset:5) but that one includes the first).

Hope it makes sense, essentially what I am looking for is that only the new data is rendered and the old data stay mounted (as if everyting rerenders, then the user gets pushed up to the start of the list everytime).

cacheExchange:

export const urqlcache = cacheExchange({
  resolvers: {
    Query: {
      recipe: simplePagination({ offsetArgument: "offset" }),
    },
  },
});

Query:

  const [offset, setOffset] = useState(0);

  const [result, reexecuteQuery] = urqlQuery({
    query: GET_RECIPE_FEED_URQL,
    variables: { offset: offset, user_id: user_id },
  });

Flatlist:

  return (
    <SafeAreaView style={styles.safeContainer} edges={["right", "left"]}>
      <FlatList
        style={styles.flatContainer}
        data={result.data.recipe}
        removeClippedSubviews={true}
        renderItem={renderItem}
        ListFooterComponent={Footer}
        refreshing={result.fetching}
        onRefresh={() => {
          reexecuteQuery();
        }}
        keyExtractor={(item) => item.id.toString()}
        onEndReachedThreshold={0.5}
        onEndReached={() => {
          setOffset(result.data.recipe.length);
        }}
      />
    </SafeAreaView>
  );
}

[kitten]

This is expected behaviour; each time a query is made against Graphcache it has to walk its normalized data and constructs a new result from scratch, as if it was basically queried anew against a server.

That also means that all data will essentially not have the same references as before. Unintuitively this is much faster than preserving any instances due to the data structure that is needed to store normalized data. They're simply consistent of records and links between entities.

What we'd have to do if we wanted to preserve previous structure is to do a lot of deep comparisons. However, because this adds an added non-trivial cost it doesn't make much sense for urql to do this globally by default for every single result.

Instead, what we'd recommend is to rely on React.memo frequently when you run into performance issues. This may start if your FlatList isn't virtualising efficiently, or if rendering a single item may take a long time. In that case you can wrap the items in React.memo and pass it a new comparison function, for instance react-fast-compare.

import isEqual from 'react-fast-compare';

export default React.memo(MyItemComponent, isEqual);

[Svarto]

Thank you @kitten, this is super helpful. So if I understand you correctly, best practice for these cases is actually to wrap the flatlist renderItem in React.memo. I did this with the 'react-fast-compare' component as you recommended and I hope this works even better now.

For future readers, I also realized that 'result.fetching' flips to 'true' when I fetch more results (totally intuitive). So as I had a loading component that showed while 'result.fetching == true' I essentially unmounted all items to then remount them once the 'result.fetching' finished. I solved this by only showing the full screen loading component if both fetching was true and data was undefined. e.g.

if (result.fetching && result.data == undefined)