perf: Simplified debounce, get rid of lodash dependency 🗜 (#106)

* perf: Simplified debounce, get rid of lodash dependency

* perf: Debounce with leading edge

* refactor: Move debounce to utils

* perf: Remove proptypes from production build

* refactor: Do not remove proptypes

Author: mrchief

.babelrc

@@ -5,9 +5,6 @@
     "test": {
       "presets": ["es2015", "stage-0", "react"],
       "plugins": ["istanbul"]
-    },
-    "production": {
-      "plugins": ["transform-react-remove-prop-types"]
     }
   }
 }

docs/bundle.js

@@ -23,8 +23,8 @@
   "author": "pandah <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf dist/**/* && webpack --config webpack.config.js --bail --mode=production",
-    "build:docs": "yarn build && webpack --config docs/webpack.config.js --bail --mode=production",
+    "build": "rimraf dist/**/* && cross-env NODE_ENV=production webpack --config webpack.config.js --bail --mode=production",
+    "build:docs": "yarn build && cross-env NODE_ENV=production webpack --config docs/webpack.config.js --bail --mode=production",
     "commit": "git-cz",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "coveralls": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
@@ -42,7 +42,6 @@
   "dependencies": {
     "array.partial": "^1.0.4",
     "classnames": "^2.2.5",
-    "lodash.debounce": "^4.0.8",
     "react-infinite-scroll-component": "^4.0.2"
   },
   "devDependencies": {
@@ -102,20 +101,31 @@
     "webpack": "^4.6.0",
     "webpack-bundle-analyzer": "^2.9.2",
     "webpack-cli": "^2.0.9",
-    "why-did-you-update": "^0.1.1",
-    "webpack-serve": "^0.3.1"
+    "webpack-serve": "^0.3.1",
+    "why-did-you-update": "^0.1.1"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0"
   },
   "ava": {
-    "files": ["src/**/*.test.js"],
-    "require": ["babel-register", "ignore-styles", "jsdom-global/register", "./setupEnzyme"],
+    "files": [
+      "src/**/*.test.js"
+    ],
+    "require": [
+      "babel-register",
+      "ignore-styles",
+      "jsdom-global/register",
+      "./setupEnzyme"
+    ],
     "babel": {
       "testOptions": {
         "babelrc": false,
-        "plugins": ["@babel/plugin-syntax-jsx"],
-        "presets": ["@babel/preset-stage-3"]
+        "plugins": [
+          "@babel/plugin-syntax-jsx"
+        ],
+        "presets": [
+          "@babel/preset-stage-3"
+        ]
       }
     },
     "snapshotDir": "__snapshots__"

package.json

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames/bind'
-import debounce from 'lodash.debounce'
 import Tag from '../tag'
 import styles from './index.css'
-import { getDataset } from '../utils'
+import { getDataset, debounce } from '../utils'
 
 const cx = cn.bind(styles)
 
@@ -31,13 +30,7 @@ class Input extends PureComponent {
 
   constructor(props) {
     super(props)
-    this.delayedCallback = debounce(
-      e => {
-        this.props.onInputChange(e.target.value)
-      },
-      50,
-      { leading: true }
-    )
+    this.delayedCallback = debounce(e => this.props.onInputChange(e.target.value), 300)
   }
 
   handleInputChange = e => {

src/input/index.js

@@ -0,0 +1,23 @@
+/**
+ * Modified debounce that always invokes on leading edge
+ * See unmodified: https://gist.github.com/mrchief/a7e8938ee96774f05644905b37f09536
+ */
+export default (func, wait) => {
+  let timeout
+
+  return (...args) => {
+    const later = () => {
+      timeout = null
+      func(...args)
+    }
+
+    // timeout will be undefined the first time (leading edge)
+    // so the callback will get executed once on leading edge
+    const callNow = !timeout
+
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+
+    if (callNow) func(...args)
+  }
+}

src/utils/debounce.js

@@ -0,0 +1,14 @@
+import test from 'ava'
+
+import debounce from './debounce'
+
+test.cb("calls on leading edge and doesn't call until wait ends", t => {
+  t.plan(2)
+  const debounced = debounce(() => t.pass(), 50)
+  debounced()
+  debounced()
+  debounced()
+  setTimeout(() => {
+    t.end()
+  }, 70)
+})

src/utils/debounce.test.js

@@ -2,3 +2,4 @@ export { default as getDataset } from './dataset'
 export { default as mapToObject } from './mapToObject'
 export { default as isEmpty } from './isEmpty'
 export { default as isOutsideClick } from './isOutsideClick'
+export { default as debounce } from './debounce'

src/utils/index.js

@@ -6362,7 +6362,7 @@ lodash.clonedeepwith@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeepwith/-/lodash.clonedeepwith-4.5.0.tgz#6ee30573a03a1a60d670a62ef33c10cf1afdbdd4"
 
-lodash.debounce@^4.0.3, lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.3:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"