Bumped React deps from 0.14-15.0 to 15.3-16.0 and replaced shallowCom…

…pare() with PureComponent

README.md

@@ -121,7 +121,6 @@ Dependencies
 React Virtualized has very few dependencies and most are managed by NPM automatically.
 However the following peer dependencies must be specified by your project in order to avoid version conflicts:
 [`react`](https://www.npmjs.com/package/react),
-[`react-addons-shallow-compare`](https://www.npmjs.com/package/react-addons-shallow-compare), and
 [`react-dom`](https://www.npmjs.com/package/react-dom).
 NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.
 

package.json

@@ -130,7 +130,6 @@
     "postcss-loader": "^0.9.1",
     "raf": "^3.3.0",
     "react": "16.0.0-alpha.2",
-    "react-addons-shallow-compare": "16.0.0-alpha.2",
     "react-addons-test-utils": "16.0.0-alpha.2",
     "react-codemirror": "^0.2.6",
     "react-dom": "16.0.0-alpha.2",
@@ -154,9 +153,8 @@
     "loose-envify": "^1.3.0"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-addons-shallow-compare": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^15.3.0 || ^16.0.0-alpha",
+    "react-dom": "^15.3.0 || ^16.0.0-alpha"
   },
   "browserify": {
     "transform": [

source/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -1,14 +1,13 @@
 /** @flow */
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
 import ArrowKeyStepper from './ArrowKeyStepper'
 import AutoSizer from '../AutoSizer'
 import Grid from '../Grid'
-import shallowCompare from 'react-addons-shallow-compare'
 import cn from 'classnames'
 import styles from './ArrowKeyStepper.example.css'
 
-export default class ArrowKeyStepperExample extends Component {
+export default class ArrowKeyStepperExample extends PureComponent {
   constructor (props) {
     super(props)
 
@@ -102,10 +101,6 @@ export default class ArrowKeyStepperExample extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _getColumnWidth ({ index }) {
     return (1 + (index % 3)) * 60
   }

source/ArrowKeyStepper/ArrowKeyStepper.js

@@ -1,11 +1,10 @@
 /** @flow */
-import React, { Component, PropTypes } from 'react'
-import shallowCompare from 'react-addons-shallow-compare'
+import React, { PropTypes, PureComponent } from 'react'
 
 /**
  * This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time.
  */
-export default class ArrowKeyStepper extends Component {
+export default class ArrowKeyStepper extends PureComponent {
   static defaultProps = {
     disabled: false,
     mode: 'edges',
@@ -71,10 +70,6 @@ export default class ArrowKeyStepper extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _onKeyDown (event) {
     const { columnCount, disabled, mode, rowCount } = this.props
 

source/AutoSizer/AutoSizer.example.js

@@ -1,13 +1,12 @@
 /** @flow */
 import Immutable from 'immutable'
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes, PureComponent } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
 import AutoSizer from './AutoSizer'
 import List from '../List'
-import shallowCompare from 'react-addons-shallow-compare'
 import styles from './AutoSizer.example.css'
 
-export default class AutoSizerExample extends Component {
+export default class AutoSizerExample extends PureComponent {
   static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
   }
@@ -78,10 +77,6 @@ export default class AutoSizerExample extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _rowRenderer ({ index, key, style }) {
     const { list } = this.context
     const row = list.get(index)

source/AutoSizer/AutoSizer.js

@@ -1,14 +1,13 @@
 /** @flow */
-import React, { Component, PropTypes } from 'react'
-import shallowCompare from 'react-addons-shallow-compare'
+import React, { PropTypes, PureComponent } from 'react'
 import createDetectElementResize from '../vendor/detectElementResize'
 
 /**
  * Decorator component that automatically adjusts the width and height of a single child.
  * Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
  * All other properties will be passed through to the child component.
  */
-export default class AutoSizer extends Component {
+export default class AutoSizer extends PureComponent {
   static propTypes = {
     /**
     * Function responsible for rendering children.
@@ -90,10 +89,6 @@ export default class AutoSizer extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _onResize () {
     const { onResize } = this.props
 

source/CellMeasurer/CellMeasurer.example.js

@@ -1,16 +1,14 @@
 /** @flow */
 import Immutable from 'immutable'
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes, PureComponent } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
 import AutoSizer from '../AutoSizer'
 import CellMeasurer from './CellMeasurer'
 import CellMeasurerCache from './CellMeasurerCache'
 import Grid from '../Grid'
 import List from '../List'
 import { Column, Table } from '../Table'
-import shallowCompare from 'react-addons-shallow-compare'
 import cn from 'classnames'
-import { findDOMNode } from 'react-dom'
 import styles from './CellMeasurer.example.css'
 
 const COLUMN_COUNT = 50
@@ -19,7 +17,7 @@ const HEIGHT = 400
 const ROW_COUNT = 50
 const ROW_HEIGHT = 35
 
-export default class CellMeasurerExample extends Component {
+export default class CellMeasurerExample extends PureComponent {
   static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
   }
@@ -83,10 +81,6 @@ export default class CellMeasurerExample extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _onClick (id) {
     this.setState({
       currentTab: id
@@ -128,7 +122,7 @@ function Tab ({ children, currentTab, id, onClick }) {
   )
 }
 
-class DynamicWidthGrid extends Component {
+class DynamicWidthGrid extends PureComponent {
   static propTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired,
     width: PropTypes.number.isRequired
@@ -165,10 +159,6 @@ class DynamicWidthGrid extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _cellRenderer ({ columnIndex, key, parent, rowIndex, style }) {
     const { list } = this.props
 
@@ -199,7 +189,7 @@ class DynamicWidthGrid extends Component {
   }
 }
 
-class DynamiHeightGrid extends Component {
+class DynamiHeightGrid extends PureComponent {
   static propTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired,
     width: PropTypes.number.isRequired
@@ -236,10 +226,6 @@ class DynamiHeightGrid extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _cellRenderer ({ columnIndex, key, parent, rowIndex, style }) {
     const { list } = this.props
 
@@ -269,7 +255,7 @@ class DynamiHeightGrid extends Component {
   }
 }
 
-class DynamicHeightList extends Component {
+class DynamicHeightList extends PureComponent {
   static propTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired,
     width: PropTypes.number.isRequired
@@ -303,10 +289,6 @@ class DynamicHeightList extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _rowRenderer ({ index, isScrolling, key, parent, style }) {
     const { list } = this.props
 
@@ -318,7 +300,7 @@ class DynamicHeightList extends Component {
 
     const source = `http://lorempixel.com/${imageWidth}/${imageHeight}/`
 
-     return (
+    return (
       <CellMeasurer
         cache={this._cache}
         columnIndex={0}
@@ -348,7 +330,7 @@ class DynamicHeightList extends Component {
   }
 }
 
-class DynamicHeightTableColumn extends Component {
+class DynamicHeightTableColumn extends PureComponent {
   static propTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired,
     width: PropTypes.number.isRequired
@@ -403,10 +385,6 @@ class DynamicHeightTableColumn extends Component {
     )
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   _columnCellRenderer ({ cellData, columnData, dataKey, parent, rowData, rowIndex }) {
     const { list } = this.props