perf(lodash): remove _.omit and _.isEqual (#2111)

* perf(lodash): remove use of omit * perf(lodash): replace isEqual with shallowEqual * fix(Dropdown|Search): restore SCU with shallowEqual
Semantic-Org · Oct 2, 2017 · 17584a9 · 17584a9
1 parent b6fb22d
commit 17584a9
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/src/lib/objectDiff.js b/src/lib/objectDiff.js
@@ -19,5 +19,6 @@ export default (source, target) => _.transform(source, (res, val, key) => {
   // deleted keys
   if (!_.has(target, key)) res[key] = '[DELETED]'
   // new keys / changed values
+  // Note, we tolerate isEqual here as this is a dev only utility and not included in production code
   else if (!_.isEqual(val, target[key])) res[key] = target[key]
 }, {})
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -14,6 +14,7 @@ import {
   makeDebugger,
   META,
   objectDiff,
+  shallowEqual,
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
@@ -395,10 +396,6 @@ export default class Dropdown extends Component {
     if (open) this.open()
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state)
-  }
-
   componentWillReceiveProps(nextProps) {
     super.componentWillReceiveProps(nextProps)
     debug('componentWillReceiveProps()')
@@ -424,17 +421,21 @@ export default class Dropdown extends Component {
     }
     /* eslint-enable no-console */
 
-    if (!_.isEqual(nextProps.value, this.props.value)) {
+    if (!shallowEqual(nextProps.value, this.props.value)) {
       debug('value changed, setting', nextProps.value)
       this.setValue(nextProps.value)
       this.setSelectedIndex(nextProps.value)
     }
 
-    if (!_.isEqual(nextProps.options, this.props.options)) {
+    if (!shallowEqual(nextProps.options, this.props.options)) {
       this.setSelectedIndex(undefined, nextProps.options)
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)
+  }
+
   componentDidUpdate(prevProps, prevState) { // eslint-disable-line complexity
     debug('componentDidUpdate()')
     debug('to state:', objectDiff(prevState, this.state))

diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
@@ -326,7 +326,11 @@ class Modal extends Component {
     const unhandled = getUnhandledProps(Modal, this.props)
     const portalPropNames = Portal.handledProps
 
-    const rest = _.omit(unhandled, portalPropNames)
+    const rest = _.reduce(unhandled, (acc, val, key) => {
+      if (!_.includes(portalPropNames, key)) acc[key] = val
+
+      return acc
+    }, {})
     const portalProps = _.pick(unhandled, portalPropNames)
 
     // wrap dimmer modals

diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
@@ -354,7 +354,11 @@ export default class Popup extends Component {
     const unhandled = getUnhandledProps(Popup, this.props)
     const portalPropNames = Portal.handledProps
 
-    const rest = _.omit(unhandled, portalPropNames)
+    const rest = _.reduce(unhandled, (acc, val, key) => {
+      if (!_.includes(portalPropNames, key)) acc[key] = val
+
+      return acc
+    }, {})
     const portalProps = _.pick(unhandled, portalPropNames)
     const ElementType = getElementType(Popup, this.props)
 

diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
@@ -16,6 +16,7 @@ import {
   META,
   objectDiff,
   partitionHTMLInputProps,
+  shallowEqual,
   SUI,
   useKeyOnly,
   useValueAndKey,
@@ -210,21 +211,21 @@ export default class Search extends Component {
     if (open) this.open()
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state)
-  }
-
   componentWillReceiveProps(nextProps) {
     super.componentWillReceiveProps(nextProps)
     debug('componentWillReceiveProps()')
     debug('changed props:', objectDiff(nextProps, this.props))
 
-    if (!_.isEqual(nextProps.value, this.props.value)) {
+    if (!shallowEqual(nextProps.value, this.props.value)) {
       debug('value changed, setting', nextProps.value)
       this.setValue(nextProps.value)
     }
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)
+  }
+
   componentDidUpdate(prevProps, prevState) { // eslint-disable-line complexity
     debug('componentDidUpdate()')
     debug('to state:', objectDiff(prevState, this.state))