Infinite Scrolling React JS recycling the dom

Question

I finished up developing an infinite scrolling flow to my component.

Everything works as expected. I want to add a recycling feature to this where DOM elements are also removed from the top as you scroll down. Then added back when you scroll up.

I've been at this with different methods for a while. I have it working where you fetch all the data at once (52,000) records in my case, and then add or remove in a viewing method. But I want it to work also with a fetching limit.

So fetch the data as you go lower adding elements to the DOM, as you go lower it removes them from the top, as you go up they get added back. I'm at a loss. Below is the code for the component. And a gif of how it works now.

var React = require('react');
import allTheStuffToMakeMyComponentWork = require'../alltheStuff.js'

class ClassInstancesListView extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            classInstancesArr: [],
            classInstanceStatusFilterStr: 'incomplete',
            limit: 25,
            search: '',
            scrolling: false
        };
    }

    componentDidMount() {
        //fetchTheData
        onClassInstancesStoreChange()
    }

    componentWillUnmount() {
        //destroying listeners
    }


    componentDidUpdate(prevProps, prevState, snapshot) {
        //adding the event listener once there is stuff fetched and on the dom
    }

    onClassInstancesStoreChange = (opInfo) => {
        //getting all my data
    };


    changeFilterStrAndRefetch = (filterStr) => {
        //changing drop down for filtering result
    };

    renderClassInstancePipelines() {
        //mapping through fetchewd data and rendering on cards
    }

    
    updateSearch(event) {
    //Event handler for using the search by type functionality.
    }


    loadMore = () => {
    //Will be called only  when the scroll event reaches the bottom of the page.
    };


    handleScroll = (e) => {
        //Scroll Listener which is initiatied on mount and listens for when the scroll reaches the last element in the #pipeLines list.
    };

    render() {
    return(
              //calling the function to render my stuff
    )

}

module.exports = ClassInstancesListView;

Infinite Scrolling React JS recycling the dom

0 Answers