event handling delayed

When scrolling with WindowScroller, I receive this error in the browser console:

Handling of ‘mousewheel’ input event was delayed for 671 ms due to main thread being busy. Consider marking event handler as ‘passive’ to make the page more responive.

This causes the scrolling behavior to be extremely choppy and virtually unusable. Your demo content makes this package look awesome and we are attempting to convert our app from react-infinite to virtualized but are so far not having much luck.

I found this thread on the topic - and it appears that React has an open issue in regards to passive event handlers : http://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responive

In addition to the scroll lag, it seems that the initial rendering of the component takes 1-2 seconds, and each time i resize the window it takes a couple of seconds for the UI to catch up. I dont see any of this behavior in your demos.

I will paste my code below, but I was wondering if this was a known issue, and if i’m doing anything wrong - I’ve been reading the documentation for days and doing my best to grock how this is supposed to work.

_renderDays() {
        var count = 0;
        return this.data.shifts.map((shiftGroup) => {
            count++;
            return (
              <Paper
                key={count}
                zDepth={2}
              >
                <Subheader>{shiftGroup.day}</Subheader>
                <mList> //materialUI List component
                  {this._renderShifts(shiftGroup.shifts)}
                </mList>
              </Paper>
            );
        });
    },
render() {
        let height = this.props.height || 400
        return (
          <WindowScroller>
            {({height, isScrolling, scrollTop})=>(
              <List
              height={height}
              rowCount={this.data.shifts.length}
              rowHeight={200}
              rowRenderer={this._renderDays}
              scrollTop={scrollTop}
              width={this.state.window.width}/>
            )}
          </WindowScroller>
        )
    },

Let me know if you need anything else to look at - these seemed to be the relevant parts of the component.

[tonymckendry]

@bvaughn to the rescue again - turns out I needed to install the react-addons-shallow-compare package - problem solved

[bvaughn]

@tonymckendry Yay great 😄 Glad to hear!

And you’re welcome, @7rulnik 😁