perf(getItemProps): memoize the event handlers for item (#841)

* memoize the event handlers for item

* use getItemId instead

* use fastMemoize instead of lodash

Author: silviuaavram

.size-snapshot.json

@@ -1,59 +1,59 @@
 {
   "dist/downshift.cjs.js": {
-    "bundled": 82171,
-    "minified": 38051,
-    "gzipped": 9612
+    "bundled": 82391,
+    "minified": 38211,
+    "gzipped": 9665
   },
   "preact/dist/downshift.cjs.js": {
-    "bundled": 80880,
-    "minified": 37003,
-    "gzipped": 9510
+    "bundled": 81100,
+    "minified": 37163,
+    "gzipped": 9564
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 93946,
-    "minified": 32080,
-    "gzipped": 9869
+    "bundled": 96750,
+    "minified": 33202,
+    "gzipped": 10210
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 108010,
-    "minified": 38136,
-    "gzipped": 11406
+    "bundled": 110814,
+    "minified": 39259,
+    "gzipped": 11755
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 98585,
-    "minified": 33398,
-    "gzipped": 10431
+    "bundled": 101389,
+    "minified": 34520,
+    "gzipped": 10797
   },
   "dist/downshift.umd.js": {
-    "bundled": 137170,
-    "minified": 47034,
-    "gzipped": 14022
+    "bundled": 139974,
+    "minified": 48161,
+    "gzipped": 14354
   },
   "dist/downshift.esm.js": {
-    "bundled": 81790,
-    "minified": 37742,
-    "gzipped": 9551,
+    "bundled": 81990,
+    "minified": 37887,
+    "gzipped": 9604,
     "treeshaked": {
       "rollup": {
-        "code": 629,
-        "import_statements": 303
+        "code": 650,
+        "import_statements": 324
       },
       "webpack": {
-        "code": 27616
+        "code": 27794
       }
     }
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 80480,
-    "minified": 36675,
-    "gzipped": 9449,
+    "bundled": 80680,
+    "minified": 36820,
+    "gzipped": 9503,
     "treeshaked": {
       "rollup": {
-        "code": 630,
-        "import_statements": 304
+        "code": 651,
+        "import_statements": 325
       },
       "webpack": {
-        "code": 27659
+        "code": 27837
       }
     }
   }

package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.5",
     "compute-scroll-into-view": "^1.0.9",
+    "fast-memoize": "^2.5.1",
     "prop-types": "^15.7.2",
     "react-is": "^16.9.0"
   },

src/downshift.js

@@ -3,6 +3,7 @@
 import PropTypes from 'prop-types'
 import {Component, cloneElement} from 'react'
 import {isForwardRef} from 'react-is'
+import memoize from 'fast-memoize'
 import {isPreact, isReactNative} from './is.macro'
 import setA11yStatus from './set-a11y-status'
 import * as stateChangeTypes from './stateChangeTypes'
@@ -833,10 +834,8 @@ class Downshift extends Component {
         !!this.props.environment.document.activeElement &&
         !!this.props.environment.document.activeElement.dataset &&
         this.props.environment.document.activeElement.dataset.toggle &&
-        (this._rootNode &&
-          this._rootNode.contains(
-            this.props.environment.document.activeElement,
-          ))
+        this._rootNode &&
+        this._rootNode.contains(this.props.environment.document.activeElement)
       if (!this.isMouseDown && !downshiftButtonIsActive) {
         this.reset({type: stateChangeTypes.blurInput})
       }
@@ -869,6 +868,49 @@ class Downshift extends Component {
   }
   //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
 
+  getItemPropsEventHandlers = memoize(
+    (index, item, onClick, onPress, onMouseMove, onMouseDown) => {
+      const onSelectKey = isReactNative
+        ? /* istanbul ignore next (react-native) */ 'onPress'
+        : 'onClick'
+      const customClickHandler = isReactNative
+        ? /* istanbul ignore next (react-native) */ onPress
+        : onClick
+
+      return {
+        // onMouseMove is used over onMouseEnter here. onMouseMove
+        // is only triggered on actual mouse movement while onMouseEnter
+        // can fire on DOM changes, interrupting keyboard navigation
+        onMouseMove: callAllEventHandlers(onMouseMove, () => {
+          if (index === this.getState().highlightedIndex) {
+            return
+          }
+          this.setHighlightedIndex(index, {
+            type: stateChangeTypes.itemMouseEnter,
+          })
+
+          // We never want to manually scroll when changing state based
+          // on `onMouseMove` because we will be moving the element out
+          // from under the user which is currently scrolling/moving the
+          // cursor
+          this.avoidScrolling = true
+          this.internalSetTimeout(() => (this.avoidScrolling = false), 250)
+        }),
+        onMouseDown: callAllEventHandlers(onMouseDown, event => {
+          // This prevents the activeElement from being changed
+          // to the item so it can remain with the current activeElement
+          // which is a more common use case.
+          event.preventDefault()
+        }),
+        [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
+          this.selectItemAtIndex(index, {
+            type: stateChangeTypes.clickItem,
+          })
+        }),
+      }
+    },
+  )
+
   /////////////////////////////// ITEM
   getItemProps = ({
     onMouseMove,
@@ -888,44 +930,14 @@ class Downshift extends Component {
       this.items[index] = item
     }
 
-    const onSelectKey = isReactNative
-      ? /* istanbul ignore next (react-native) */ 'onPress'
-      : 'onClick'
-    const customClickHandler = isReactNative
-      ? /* istanbul ignore next (react-native) */ onPress
-      : onClick
-
-    const enabledEventHandlers = {
-      // onMouseMove is used over onMouseEnter here. onMouseMove
-      // is only triggered on actual mouse movement while onMouseEnter
-      // can fire on DOM changes, interrupting keyboard navigation
-      onMouseMove: callAllEventHandlers(onMouseMove, () => {
-        if (index === this.getState().highlightedIndex) {
-          return
-        }
-        this.setHighlightedIndex(index, {
-          type: stateChangeTypes.itemMouseEnter,
-        })
-
-        // We never want to manually scroll when changing state based
-        // on `onMouseMove` because we will be moving the element out
-        // from under the user which is currently scrolling/moving the
-        // cursor
-        this.avoidScrolling = true
-        this.internalSetTimeout(() => (this.avoidScrolling = false), 250)
-      }),
-      onMouseDown: callAllEventHandlers(onMouseDown, event => {
-        // This prevents the activeElement from being changed
-        // to the item so it can remain with the current activeElement
-        // which is a more common use case.
-        event.preventDefault()
-      }),
-      [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
-        this.selectItemAtIndex(index, {
-          type: stateChangeTypes.clickItem,
-        })
-      }),
-    }
+    const enabledEventHandlers = this.getItemPropsEventHandlers(
+      index,
+      item,
+      onClick,
+      onMouseDown,
+      onMouseMove,
+      onPress,
+    )
 
     // Passing down the onMouseDown handler to prevent redirect
     // of the activeElement if clicking on disabled items