1

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);
    }
Param Singh
  • 1,325
  • 3
  • 13
  • 28

2 Answers2

1

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.

Bernhard Gschwantner
  • 1,547
  • 11
  • 12
  • fetchPaginatedResult function is not being called on every scroll event, rather it's being called only when the user has scrolled to the bottom. – Param Singh Aug 12 '16 at 13:58
  • @ParamSingh the symptoms you describe could certainly be caused by the scrollHandler being called an obscene number of times. It's hard to say for sure, but you should verify that it's not the case with some logging – Devin Howard Aug 15 '16 at 02:19
  • @ParamSingh if you just add a `console.log('scroll handler called');` you can easily verify if the handler is called once or several times. – Bernhard Gschwantner Aug 17 '16 at 14:21
0

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.

Mihir
  • 3,812
  • 3
  • 25
  • 29
  • No, actually its a web app, not a react native app. Its being rendered inside a webview in an already built android native app. – Param Singh Aug 12 '16 at 09:59
  • @ParamSingh Oh sorry, I did not read your question carefully. In that case, I can only point you to some relevant articles- [this](http://stackoverflow.com/questions/30976722/react-performance-rendering-big-list-with-purerendermixin) and [this](https://facebook.github.io/react/docs/advanced-performance.html) and [this](https://discuss.reactjs.org/t/performance-problems-with-react-when-using-a-big-list/3432) – Mihir Aug 12 '16 at 10:09