Memoize parent node extraction in study tree

This avoids re-rendering the study overview on every (!) state change

Author: FelixHenninger

packages/builder/package.json

@@ -47,6 +47,7 @@
     "react-transition-group": "^4.3.0",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.5",
+    "reselect": "^4.0.0",
     "serialize-javascript": "^3.0.0",
     "slugify": "^1.3.6",
     "uuid4": "^1.1.4"

packages/builder/src/components/Tree/components/DropTarget/index.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { createSelectorCreator, defaultMemoize } from 'reselect'
+
 import { DropTarget } from 'react-dnd'
 import classnames from 'classnames'
-import { flow } from 'lodash'
+import { isEqual, flow } from 'lodash'
 
 import { parents } from '../../../../logic/tree'
 
@@ -62,13 +64,28 @@ const collect = (connect, monitor) => ({
   validTarget: monitor.canDrop() && monitor.isOver({ shallow: true }),
 })
 
+// Redux integration -----------------------------------------------------------
+
+const getParents = (state, props) =>
+  parents(props.id, state.components)
+
+const createDeepEqualSelector = createSelectorCreator(
+  defaultMemoize,
+  isEqual
+)
+
+const makeMapStateToProps = () => {
+  const parentSelector = createDeepEqualSelector(
+    [getParents], parents => parents,
+  )
+  const mapStateToProps = (state, props) => ({
+    parentIds: parentSelector(state, props)
+  })
+  return mapStateToProps
+}
+
 // Make the component a DropTarget
 export default flow(
   DropTarget('node', targetSpec, collect),
-  connect((state, props) => ({
-    parentIds: parents(
-      props.id,
-      state.components
-    )
-  })),
+  connect(makeMapStateToProps),
 )(TreeDropTarget)

yarn.lock

@@ -14884,6 +14884,11 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"