Infinite Scroller duplicating list results [ReactJS]

react-infinite-scroll-component
react-infinite scroll table

so I'm working on a pokedex project that is linked to the PokeAPI. I have the main page that loads up the list ans the code for PokemonList.js is as follows:

import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";

export default class PokemonList extends Component {
  state = {
    url: "https://pokeapi.co/api/v2/pokemon?limit=20&offset=0.",
    pokemon: null,
    itemsCountPerPage: 20,
    activePage: 1,
    count: 365,
    previous: null
  };

  loadPokemon = () => {
    axios
      .get(this.state.url)
      .then(res => {
        this.setState(prevState => {
          return {
            pokemon: [...prevState.pokemon, ...res.data.results],
            url: res.data.next
          };
        });
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokemon: res.data["results"] });
  }

  render() {
    console.log(this.state.pokemon);
    return (
      <React.Fragment>
        {this.state.pokemon ? (
          <div className="row">
            <InfiniteScroll
              pageStart={1}
              loadMore={this.loadPokemon}
              hasMore={true}
              loader={
                <div className="loader" key={0}>
                  Loading ...
                </div>
              }
            >
              {this.state.pokemon.map((pokemon, i) => (
                <PokemonCard
                  key={pokemon.name + i}
                  name={pokemon.name}
                  url={pokemon.url}
                />
              ))}
            </InfiniteScroll>
          </div>
        ) : (
          <h1>Loading Pokemon</h1>
        )}
      </React.Fragment>

      /*<React.Fragment>
        {this.state.pokemon ? (
          <div className="row">
            {this.state.pokemon.map(pokemon => (
              <PokemonCard
                key={pokemon.name}
                name={pokemon.name}
                url={pokemon.url}
              />
            ))}
          </div>
        ) : (
          <h1>Loading Pokemon</h1>
        )}
      </React.Fragment>*/
    );
  }
}

For some reason, the first 20 PokemonCards are loaded in from the API, but once I reach the 20th one, the infinite scroller loads up the first 20 again before eventually loading the next 20-40, then 40-60. It is only the first set amount that is duplicated.

This is a screenshot of the console being returned

As you can see, Bulbasaur is repeated after the 20th data in the list.


You should not called the loadPokemon function inside your componentDidMount(). Remove it and it should work as expected!

import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";

export default class PokemonList extends Component {
  state = {
    url: "https://pokeapi.co/api/v2/pokemon?limit=20&offset=0.",
    pokemon: [],
    itemsCountPerPage: 20,
    activePage: 1,
    count: 365,
    previous: null
  };

  loadPokemon = () => {
    axios
      .get(this.state.url)
      .then(res => {
        this.setState(prevState => {
          return {
            pokemon: [...prevState.pokemon, ...res.data.results],
            url: res.data.next
          };
        });
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };

  render() {
    console.log(this.state.pokemon);
    return (
      <React.Fragment>
        {this.state.pokemon ? (
          <div className="row">
            <InfiniteScroll
              pageStart={1}
              loadMore={this.loadPokemon}
              hasMore={true}
              loader={
                <div className="loader" key={0}>
                  Loading ...
                </div>
              }
            >
              {this.state.pokemon.map((pokemon, i) => (
                <PokemonCard
                  key={pokemon.name + i}
                  name={pokemon.name}
                  url={pokemon.url}
                />
              ))}
            </InfiniteScroll>
          </div>
        ) : (
          <h1>Loading Pokemon</h1>
        )}
      </React.Fragment>
    );
  }
}

Infinite scroll creates duplicate records · Issue #876 · appbaseio , Issue Type: Bug Platform: Web Description: When using infinite scroll, if you scroll down past the first page or so it shows new results but loads duplicate hits. In addition to showing duplicates, it also throws a React error: By the way we observe duplicate key errors with multi-list when the app data does  I am looking at ways to implement infinite scrolling with React. I have come across react-infinite-scroll and found it inefficient as it just adds nodes to the DOM and doesn't remove them. Is there any proven solution with React which will add, remove and maintains constant number of nodes in the DOM.


I ended up changing my state from

pokemon: null,

to

pokemon: [],

And I added

const pokemon = prevState.pokemon;

to my loadPokemon Function

Build an Infinite Scroll Component in React using React Hooks , We've got a React List component, but it doesn't infinite scroll. As a result, we need to add another state variable to our List component to keep track of that state change. But, what if we didn't have to duplicate that code? You are presented with a feed of images and as you scroll down, more images keep showing up. Over and over and over until they run out of content to give you. This article will teach you how to implement the infinite scroll concept into a React component and uses the Random User Generator to load a list of users from.


In your componentDidMount function, you need to set your this.state.url, just like you do each time loadPokemon is called. You are calling the base url twice for the first page currently, once in componentDidMount and again in loadPokemon.

How to Implement Infinite Scrolling with ReactJs, Infinite scroll is a mechanism that shows data based on an endless scroll event and loads In React, we have two choices to develop infinite scroll. called photos , which contains the list of photos coming from the API response. but we can also use several third-party libraries to achieve the same result. A function that returns a DOM Element or Window that will be treated as the scrolling container for the list. In most cases this does not need to be set for the list to work as intended. It is exposed as a prop for more complicated uses where the scrolling container may not initially have an overflow property that enables scrolling.


Infinite Scroll with Ionic + React, How to implement an Infinite Scroll with Ionic + React and a filter with Hooks. Of course for that reason we might have duplicates in our list. Finally, if you run the app and scroll the right-side list, you’ll see how the other list is also scrolled: Ensure your large lists render properly Debugging React applications can be difficult, especially when there is complex state or large components like lists.


React manually scroll, Demo Install: npm install react-animate-on-scroll --save If you want to use the Material design List Cards Infinite Scroll Bootstrap Table Layout Scroll Single Create layout Javascript Detect Manual Scrollbar Position Of Div possible duplicate of is lengthy and the user has to scroll down manually it results in a bad UX. By default, React Infinite renders a single element with the provided containerHeight, and the list sticks to the top like a regular table. However, you can choose to use the entire window as the scroll container or make React Infinite like a chatbox with the following options.


Stop building websites with infinite scroll!, Infinite scroll may be disorienting, difficult to control, and stressful for some users, so you may want to consider these Bad: Duplicate items may be shown if data changes Google uses this kind of navigation in search results: In a timeline-​based list, people mostly don't look for a date or unique moment. Search results should, therefore, load only 25 to 75 products by default, and infinite scrolling should never be used for the search results. (Interestingly, Etsy’s famous A/B split test of infinite scrolling also documented a significant hit to the search experience.) Pagination or a “Load more” button would be better for search results