From a15c8335e997152c688bc5bfca3ce3f105465542 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Fri, 6 Jul 2018 09:48:57 -0700
Subject: [PATCH] Extend React.PureComponent instead of React.Component

I was doing some profiling and I noticed that when Waypoint updates, we
call `this._handleScroll` synchronously, which eventually calls functions
that force layout. 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.

I think we should 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.

   ```jsx
   <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.

This commit implements the first of these two interventions.

Partly addresses #263
---
 src/waypoint.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/waypoint.jsx b/src/waypoint.jsx
index 0146444..93d8272 100644
--- a/src/waypoint.jsx
+++ b/src/waypoint.jsx
@@ -22,10 +22,13 @@ const defaultProps = {
   fireOnRapidScroll: true,
 };
 
-/**
- * Calls a function when you scroll to the element.
- */
-export default class Waypoint extends React.Component {
+// React.PureComponent was added in React 15.3.0
+const BaseClass = typeof React.PureComponent !== 'undefined' ?
+  React.PureComponent :
+  React.Component;
+
+// Calls a function when you scroll to the element.
+export default class Waypoint extends BaseClass {
   constructor(props) {
     super(props);