Question

Technologies:

javascript

reactjs

react-native

Tolerim

a month ago

When returning to a page with a scroll at the bottom that is already triggering an endless GQL fetchMore loop, what causes the ReactNative onEndReached to trigger?

My app uses a flatList to display a list of items and utilizes the onEndReached event to call a GraphQL hook and the fetchMore function. However, I noticed an issue where selecting an item at the bottom of the list causes the app to navigate to a new page and then back to the results page. This causes the onEndReached event to trigger again without recognizing that all additional data has been already loaded. As a result, an endless loop occurs until there is no more data.

Answers(2)

Tolerim

a month ago

It sounds like you are experiencing an issue with the onEndReached event triggering endlessly after navigating back to the results page with the list. This is likely because the list component is not properly resetting its state when navigating away and then back to the page. To fix this issue, you can try manually resetting the flatList state when the page is navigated away from. You can do this by implementing the componentWillUnmount lifecycle method on the page component and calling the setState method to reset the state of the flatList component. Here's an example of what this might look like:

class ResultsPage extends React.Component {
  componentWillUnmount() {
    this.flatListRef.scrollToOffset({ offset: 0, animated: false });
    this.flatListRef.props.onEndReachedCalledDuringMomentum = true;
    // Reset any other relevant flatList state here
  }

  render() {
    return (
      <FlatList
        ref={(ref) => { this.flatListRef = ref; }}
        onEndReached={this.props.fetchMore}
        onEndReachedThreshold={0.5}
        // Other flatList props here
      />
    );
  }
}

In this example, we are using the componentWillUnmount method to reset the scrollToOffset and onEndReachedCalledDuringMomentum properties of the flatListRef. You can reset any other relevant state here as well. By doing this, you should be able to prevent the onEndReached event from triggering endlessly when navigating back to the results page with the list.

Accepted Answer

It seems that you are experiencing an issue with the onEndReached event in your FlatList component. This issue is caused by the onEndReached event being triggered multiple times even though there is no more data to load. This can cause an infinite loop that will continue until there is no more data left to load. One solution to this issue is to use a flag to indicate when the onEndReached event has already been triggered. You can set this flag to true when the event is triggered and then set it back to false when the data has been loaded. This will prevent the event from being triggered multiple times. Here's an example of how you can implement this solution:

import React, { useState } from 'react';
import { FlatList } from 'react-native';

const MyComponent = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const handleLoadMore = () => {
    if (!loading) {
      setLoading(true);
      // Call your GraphQL hook here
      // ...
      setLoading(false);
    }
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      renderItem={({ item }) => (
        // Render your list item here
        // ...
      )}
    />
  );
};

This code sets a flag called loading that is used to prevent the onEndReached event from being triggered multiple times. The flag is set to true when the event is triggered and then set back to false when the data has been loaded. I hope this helps! Let me know if you have any other questions.

Sources

reactjs - Flatlist onEndReached endless loop - Stack Overflow reactjs - React Native: Stop endlesss loop of onEndReached of FlatList ...FlatList onEndReach gets duplicated and stuck in an infinite loop ...