React scroll reset by GetMeteorData

react
1

My Meteor/React app has a section at the bottom of the page for news. It displays half a dozen news entries followed by a Load More button if there are additional stories. The button increments a state variable called limit which governs the number of stories displayed. It is passed to a meteor method that returns the news data.

My problem is that the browser window scroll is occasionally getting reset to the top of the page when LoadMore is pressed. This forces the user to scroll back to where they were reading. I’ve tracked the problem down to a short delay sometimes caused when getMeteorData is loading. During the barely noticeable delay the page is getting rendered without any news which is responsible for the scroll reset.

Is there a simple fix?

2

can you post your getmeteordata code?

3

Thanks I think I found my answer here. I broke the component into 2 components (a wrapper to load data and one to display it). Then I used shouldComponentUpdate to block re-renders if the news is loading or empty.

shouldComponentUpdate only works with props or state (not data).

    shouldComponentUpdate: function(nextProps, nextState) {
        if(nextProps.news.length ===0 | nextProps.newsLoading){
            return false;
        } else {
            return true;
        }
    },
1 Like