componentDidUpdate forces synchronous layout, which causes layout thrashing

[lencioni]

I was doing some profiling and I noticed that when Waypoint updates, we call this._handleScroll synchronously, which eventually calls functions that force layout.

https://github.com/brigade/react-waypoint/blob/b06941c20643afb8a3d427f7c8d79b6ba137f2bb/src/waypoint.jsx#L80-L92

Since this happens during render, the layout is immediately invalidated and then triggered again once rendering is completed.

We avoid this problem in componentDidMount by deferring this work until the next tick.

https://github.com/brigade/react-waypoint/blob/b06941c20643afb8a3d427f7c8d79b6ba137f2bb/src/waypoint.jsx#L47-L73

I think we should probably consider making two changes to Waypoint to help address this:

1. Extend React.PureComponent instead of React.Component. In the place I saw this problem, we were rendering a waypoint with pure props, so the update in this case could be completely avoided by using PureComponent.

<Waypoint
  onEnter={this.onEnterWaypoint}
  scrollableAncestor={this.props.scrollableAncestor}
/>

2. Defer this._handleScroll in componentDidUpdate using onNextTick, like we do in componentDidMount. This will still require layout, but it will happen around the same time that the browser was going to do layout anyway, avoiding the thrash.