Infinite scrolling with React JS

Question

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.

Here is the jsfiddle problem. In this problem, i want to have only 50 elements in the DOM at a time. others should be loaded and removed as user scrolls up and down. We have started using React because of it's optimization algorithms. Now i couldn't find solution to this problem. I have come across airbnb infinite js. But it is implemented with Jquery. To use this airbnb infinite scroll, i have to loose the React optimisation which i don't want to do.

sample code i want to add scroll is(here i am loading all items. My goal is to load only 50 items at a time)

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return (<li>Hello {this.props.name}</li>);
    }
});

var HelloList = React.createClass({ 
     getInitialState: function() {                            
         var numbers =  [];
         for(var i=1;i<10000;i++){
             numbers.push(i);
         }
         return {data:numbers};
     },

    render: function(){
       var response =  this.state.data.map(function(contact){          
          return (<Hello name="World"></Hello>);
        });

        return (<ul>{response}</ul>)
    }
});

React.renderComponent(<HelloList/>, document.getElementById('content'));

Looking for help...

Disengagement

Answer 1

Basically when scrolling you want to decide which elements are visible and then rerender to display only those elements, with a single spacer element on top and bottom to represent the offscreen elements.

Vjeux made a fiddle here which you can look at: jsfiddle.

Upon scrolling it executes

scrollState: function(scroll) {
    var visibleStart = Math.floor(scroll / this.state.recordHeight);
    var visibleEnd = Math.min(visibleStart + this.state.recordsPerBody, this.state.total - 1);

    var displayStart = Math.max(0, Math.floor(scroll / this.state.recordHeight) - this.state.recordsPerBody * 1.5);
    var displayEnd = Math.min(displayStart + 4 * this.state.recordsPerBody, this.state.total - 1);

    this.setState({
        visibleStart: visibleStart,
        visibleEnd: visibleEnd,
        displayStart: displayStart,
        displayEnd: displayEnd,
        scroll: scroll
    });
},

and then the render function will display only the rows in the range displayStart..displayEnd.

You may also be interested in ReactJS: Modeling Bi-Directional Infinite Scrolling.

Caiaphas

This is a great technique... thx! However, it fails when the recordHeight is different for each row. I'm experimenting with a fix for that situation. I'll post it if I get it to work. – Fit

@Fit Have you found solution for different height for each row? – Haplology

Another project to check out is infinity.js (for inspiration). If you have dynamic height elements, then you can create the concept of a "page" which is a set of elements in the viewport. Say there are 3 elements, and the third element is super long and stretches off the page. Then you can, say, "page height" is the size of the largest 3 elements. Then construct virtual nodes using the smallest element height. So var count = pageHeight / minElementHeight. So you might construct 50 elements, even though only 3 are rendered, but that will still give you good performance. – Boutin

Nothing appears in the fiddle. Generate buttons appear, but nothing else. – Belva

@sophie-alpert : Is it possible to update jsfiddle ? I know you will be busy, but if you can update it, it would benefit many like me :D – Thoroughgoing

Answer 2

Check out our React Infinite Library:

https://github.com/seatgeek/react-infinite

Update December 2016

I've actually been using react-virtualized in a lot of my projects recently and find that it covers the majority of use cases a lot better. Both libraries are good, it depends on exactly what you're looking for. For instance, react-virtualized supports variable height JIT measuring via an HOC called CellMeasurer, example here https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer.

Update November 2018

A lot of the lessons from react-virtualized have been ported to the smaller, faster, more efficient react-window library from the same author.

Drunk

@jos: use this library. It'll remove/append DOM nodes as they appear in the viewport. – Lymphocytosis

This library only works if you know the heights of your elements before rendering. – Hagood

@Druska, Technically yes, however you can also use the window as the scroll container using the useWindowAsScrollContainer option. – Cozenage

Does the react-infinite library support grids? – Dissatisfaction

It does indeed, github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md – Drunk

This is the most helpful answer and this should be at the top – Xenomorphic

react-virtualized and react-window do not support reverse direction. For example, you can not implement a chat application with both. github.com/bvaughn/react-window/issues/247 – Frog

Answer 3

import React, { Component } from 'react';
import InfiniteScroll from 'react-infinite-scroller';


const api = {
    baseUrl: '/joblist'
};

class Jobs extends Component {
    constructor(props) {
            super(props);
            this.state = {
                listData: [],
                hasMoreItems: true,
                nextHref: null
        };
    }

    fetchData(){
            var self = this;           
            var url = api.baseUrl;
            if(this.state.nextHref) {
                url = this.state.nextHref;
            }

            fetch(url)
            .then( (response) => {
                return response.json() })   
                    .then( (json) => {
                        var list = self.state.listData;                        
                        json.data.map(data => {
                            list.push(data);
                        });

                        if(json.next_page_url != null) {
                            self.setState({
                                nextHref: resp.next_page_url,
                                listData: list                               
                            });
                        } else {
                            self.setState({
                                hasMoreItems: false
                            });
                        }
                    })
                    .catch(error => console.log('err ' + error));

        }
    }

    componentDidMount() {
       this.fetchData();
    }

    render() {
    const loader = <div className="loader">Loading ...</div>;
    let JobItems; 
    if(this.state.listData){  
        JobItems = this.state.listData.map(Job => {
        return (
            <tr>
                <td>{Job.job_number}</td>
                <td>{Job.title}</td>
                <td>{Job.description}</td>
                <td>{Job.status}</td>
            </tr>
        );
      });
    }
    return (
      <div className="Jobs">
        <div className="container">
            <h2>Jobs List</h2>

            <InfiniteScroll
                pageStart={0}
                loadMore={this.fetchData.bind(this)}
                hasMore={this.state.hasMoreItems}
                loader={loader}>
                <table className="table table-bordered">
                <thead>
                    <tr>
                        <th>Job Number</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                {JobItems}
                </tbody>
                </table>
            </InfiniteScroll>
        </div>
    </div>
    );
  }

}

export default Jobs;

Ribble