title: React Native Infinite Scroll - Fetch More
body: <p>I am trying to do an infinite scroll with flatlist. However, every time I make a function to fetch more data, I have a loop with the same data (3 times). Here is my code without fetch more function. How can I fetch more data by changing the page number and making it an infinite scroll until there is no more data left.</p>
  
  <p>P.S. I have setted up Page state and making it +1, but because state updates >3times, I get unlimited loop again with pages that don't even exist.</p>
  
  <pre><code> export default class List extends React.PureComponent {
  constructor(props) {
      super(props);
      this.fetchData = this._fetchData.bind(this);
      this.state = {
          isLoading: true,
          isLoadingMore: false,
          _data: null,
          accessToken: ""
      };
  }
  async componentWillMount() {
      try {
          let accessToken = await AsyncStorage.getItem(ACCESS_TOKEN).then(
              JSON.parse
          );
          if (!accessToken) {
              this.redirect("login");
          } else {
              this.setState({ accessToken: accessToken });
          }
      } catch (error) {
          console.log("Something went wrong");
          this.redirect("login");
      }
  
      this.fetchData(responseJson =&gt; {
          const data = responseJson;
          this.setState({
              isLoading: false,
              _data: data
          });
      });
  }
  
  _fetchData(callback) {
      fetch(`https://website.com/posts?page=${page}&amp;per_page=10`, {
          method: "GET",
          headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              Authorization: "Bearer " + this.state.accessToken.token
          }
      })
          .then(response =&gt; response.json())
          .then(callback)
          .catch(error =&gt; {
              console.error(error);
          });
  }
  </code></pre>