Skip to content

Commit

Permalink
perf: Simplified debounce, get rid of lodash dependency 🗜 (#106)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
mrchief authored May 30, 2018
1 parent 3220c67 commit 236afb2
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 23 deletions.
3 changes: 0 additions & 3 deletions .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
"test": {
"presets": ["es2015", "stage-0", "react"],
"plugins": ["istanbul"]
},
"production": {
"plugins": ["transform-react-remove-prop-types"]
}
}
}
2 changes: 1 addition & 1 deletion docs/bundle.js

Large diffs are not rendered by default.

28 changes: 19 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down Expand Up @@ -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__"
Expand Down
11 changes: 2 additions & 9 deletions src/input/index.js
Original file line number Diff line number Diff line change
@@ -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)

Expand All @@ -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 => {
Expand Down
23 changes: 23 additions & 0 deletions src/utils/debounce.js
Original file line number Diff line number Diff line change
@@ -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)
}
}
14 changes: 14 additions & 0 deletions src/utils/debounce.test.js
Original file line number Diff line number Diff line change
@@ -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)
})
1 change: 1 addition & 0 deletions src/utils/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down

0 comments on commit 236afb2

Please sign in to comment.