onEndReached firing multiple times

[itajenglish]

Describe the bug onEndReached method gets fired multiple times when scrolling to the end of scroll view when trying to fetch next set of data for pagination.

Code:

 return (
    <View style={styles.container}>
      <MasonryList
        contentContainerStyle={styles.bListContainer}
        data={feedActivites}
        keyExtractor={(item) => item.id}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => <ActivityCard key={item.id} activity={item} />}
        refreshing={feedFetching}
        onRefresh={() => getInitialFeedActivites()}
        onEndReached={() => {
            console.log('onEndReached Fired!');
            // getNextActivites();
        }}
        onEndReachedThreshold={0.1}
      />
    </View>
  );
}

To Reproduce Steps to reproduce the behavior:

1. Add data to data array
2. add onEndReached Method
3. Scroll down to end of List
4. onEndReached Method gets called in rapid succession multiple times

Expected behavior Should only fire one time when reaching end of list

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac OS Big Sir
• Browser: Chrome
• Version: 91

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: iOS 14.5

Additional context Add any other context about the problem here.

[itajenglish]

This solution worked for me. https://stackoverflow.com/a/47940952/1065877

[hyochan]

I am not sure why I can't reproduce this on my side. I'll see how I can handle this internally when I can reproduce this.

[itajenglish]

Do you mind sharing your code from the YouTube video? Maybe you did something differently?

[hyochan]

Sure~!

const LayoutTwo: FC<Props> = ({
  ITEM_CNT,
  items,
  isLoadingNext,
  loadNext,
  refetch,
}) => {
  const {viewedItemIds} = useDiscoveryContext();

  const filteredItems = useMemo(() => {
    return items.filter((item) => !viewedItemIds.has(item.id));
  }, [items, viewedItemIds]);

  return (
    <MasonryList
      data={filteredItems}
      keyExtractor={(item, index): string => index.toString()}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      LoadingView={
        <View
          style={{
            height: 40,
            width: '100%',
          }}>
          <LoadingIndicator />
        </View>
      }
      renderItem={({item}): ReactElement => {
        return <DiscoveryCard isItem itemData={item} isDiscovery={false} />;
      }}
      refreshing={isLoadingNext}
      onRefresh={() => {
        refetch?.({first: ITEM_CNT}, {fetchPolicy: 'network-only'});
      }}
      onEndReachedThreshold={0.1}
      onEndReached={() => loadNext?.(ITEM_CNT)}
    />
  );
};

[Stevemoretz]

onEndReached is called multiple times in facebook's flatlist component as well I doubt you have done something wrong in your library.

[hyochan]

I suspect this issue is due to re-rendering. I've made masonry list as a pure component from 1.1.0.

Please try this again and come back if it still is a problem @itajenglish

[itajenglish]

Hi, @hyochan Still experiencing the same issues in the latest version.

[ldhios]

I also had a problem with onEndReached calling multiple times in the latest version.