CODEWITHSUNDEEP
javascriptreactjsreduxweb-worker
Param Singh
Param Singh

Reputation: 1366

Scroll Performance in React App

I've built an app using React and Redux which calls an api from the backend and renders a list of items. There's infinite scrolling pagination on this list. It looks something like this.enter image description here

I'm using this app to open in an Android app webview but that's not the problem. The problem is that when there's only one page pagination, its performance is fine while scrolling but as soon as it reaches the bottom of the page and triggers an event of api call to fetch the next page result from the backend, I observe a very bad jank on scrolling. Not only that, the page moves to a very less distance on scrolling, I have to move my finger twice or thrice to scroll upwards or downwards.

I have tried running the redux functionality inside web worker since single UI thread from everything might have been causing problem. But, the results are not statisfying even after that.

What can I do to make the scroll good and move to a good intended distance when I move webpage on touch.

Here's some code for the same.

    componentDidMount(){              
        if(this.showTabs(this.props.location.query.uri)){
            this.props.setCurrentDealListingType('online');
            this.fetchOnlineDeals();
        } else {            
            this.props.setCurrentDealListingType('deals');
            this.fetchDeals();
        }           
        
        var self = this;
        scrollHandler =  function (event) {
            if (document.body.scrollHeight ===
                document.body.scrollTop +        
                window.innerHeight) {
                self.fetchPaginatedResult();           
            }
        }

        document.addEventListener('scroll', scrollHandler);

    }
    
    componentWillUnmount(){
        document.removeEventListener('scroll', scrollHandler);
    }

Upvotes: 1

Views: 1308

Answers (2)

Bernhard Gschwantner
Bernhard Gschwantner

Reputation: 1537

As far as I can see from your code, the function fetchPaginateResult is called for every scroll event, which might happen about 60x per second, not just once (as soon as you reach your waypoint, of course). You can try to fix this yourself, or you can use libraries that do this for you, such as the excellent react-waypoint module.

Have you looked at react-virtualized by chance? It provides you with very efficient list rendering, very similar to native ListViews on mobile OS'. This makes especially sense when you have potentially very large datasets.

Upvotes: 1

Mihir
Mihir

Reputation: 3902

I assume that you're using ListView for rendering the products list. If you just go through the ListView documentation, you'll find a lot of props to make your list performant.

  1. initialListSize
  2. onChangeVisibleRows

You'll have to write the optimizations on your own, though.

Upvotes: 0

Related Questions