how to best call setState when the user scrolls back to the top

[vgoklani]

We've setup react-infinite as a child to our data-feed handler, so it automatically runs setState when new props are passed in. We've also modified shouldComponentUpdate() so that react-infinite only updates when the user is at the top of the list, i.e.:

shouldComponentUpdate: function(nextProps, nextState) {
    if( (nextProps.forceUpdate == true) || (this.state.isInfiniteLoading == true) || (this.state.scrollableNode == null) || ((this.state.scrollableNode.scrollTop > 0) == false)) {
        return true;
    } else {
        return false;
    }

The problem I'm running into is that setState isn't called automatically when the user scrolls back to the top. Essentially when the user scrolls to the top, the component isn't automatically updated, and just waits until new data comes in from the feedhandler.

What's the best approach for adding a handler to call setState when the scrollTop goes from something positive to 0?

Thanks!

[garetht]

I might be missing something here. What would the component be updated with if there is no new data from the feed handler?

[vgoklani]

The Feedhandler is constantly pushing new data to the component, but the component only renders when the user is at the top of the feed. So if the user scroll down, then scrolls back up, nothing gets rendered, until ADDITIONAL data comes from the feedhandler (which then triggers the setstate). All the data that was sent from the feedhandler but wasn't actually rendered (since the user wasn't at the top) still sits in the buffer of the component. So when a new data packet comes in, the setState renders the full buffer, and the component renders all the updated data.

The problem I'm running into is that when the user scrolls back to the top, the component doesn't automatically re-render, even though there is new data in the buffer. I hope that's less confusing.

Thanks!