diff --git a/package.json b/package.json
index 844fe6ac5b..d42c46e4ac 100644
--- a/package.json
+++ b/package.json
@@ -214,6 +214,7 @@
     "remark-react-lowlight": "^0.7.0",
     "reselect": "^3.0.1",
     "scriptjs": "^2.5.8",
+    "shallowequal": "^1.0.2",
     "slowparse": "^1.1.4",
     "strip-markdown": "^3.0.0",
     "stylelint": "^9.2.0",
diff --git a/src/util/resizableFlex.js b/src/util/resizableFlex.js
index 9b157c903f..58c78c22a3 100644
--- a/src/util/resizableFlex.js
+++ b/src/util/resizableFlex.js
@@ -4,7 +4,9 @@ import findIndex from 'lodash-es/findIndex';
 import isNull from 'lodash-es/isNull';
 import map from 'lodash-es/map';
 import merge from 'lodash-es/merge';
+import shallowequal from 'shallowequal';
 import times from 'lodash-es/times';
+import {createSelector, defaultMemoize} from 'reselect';
 import {makeGetResizableFlexGrow} from '../selectors';
 import {updateResizableFlex} from '../actions';
 
@@ -79,67 +81,76 @@ export default function resizableFlex(size) {
       const regions = times(size, () => ({current: null}));
       const initialMainSizes = times(size, () => null);
 
-      return (state, ownProps) => merge(
-        {
-          onResizableFlexDividerDrag(beforeIndex, event, payload) {
-            const afterIndex = findIndex(regions, 'current', beforeIndex + 1);
-            const [{current: before}, {current: after}] =
-              at(regions, [beforeIndex, afterIndex]);
-
-            const {getCurrentSize, getDesiredSize} =
-              directionAdapterFor(before);
-
-            const [desiredBeforeFlexGrow, desiredAfterFlexGrow] =
-              calculateFlexGrowAfterDrag(
-                {
-                  currentFlexGrow: Number(
-                    getComputedStyle(before)['flex-grow'],
-                  ),
-                  currentSize: getCurrentSize(before),
-                  desiredSize: getDesiredSize(before, payload),
-                  initialMainSize: initialMainSizes[beforeIndex],
-                },
-                {
-                  currentFlexGrow: Number(
-                    getComputedStyle(after)['flex-grow'],
-                  ),
-                  currentSize: getCurrentSize(after),
-                  initialMainSize: initialMainSizes[afterIndex],
-                },
-              );
-
-            dispatch(updateResizableFlex(
-              instanceId,
-              [
-                {index: beforeIndex, flexGrow: desiredBeforeFlexGrow},
-                {index: afterIndex, flexGrow: desiredAfterFlexGrow},
-              ],
-            ));
-          },
-
-          resizableFlexRefs: map(
-            regions,
-            (region, index) => (element) => {
-              region.current = element;
-              if (isNull(element)) {
-                initialMainSizes[index] = null;
-                return;
-              }
-
-              const flexGrowWas = element.style.flexGrow;
-              const flexShrinkWas = element.style.flexShrink;
-              element.style.flexGrow = element.style.flexShrink = '0';
-              initialMainSizes[index] = directionAdapterFor(element).
-                getCurrentSize(element);
-              element.style.flexGrow = flexGrowWas;
-              element.style.flexShrink = flexShrinkWas;
-            },
-          ),
-
-          resizableFlexGrow: getResizableFlexGrow(state),
+      const stateIndependentFunctions = {
+        onResizableFlexDividerDrag(beforeIndex, event, payload) {
+          const afterIndex = findIndex(regions, 'current', beforeIndex + 1);
+          const [{current: before}, {current: after}] =
+            at(regions, [beforeIndex, afterIndex]);
+
+          const {getCurrentSize, getDesiredSize} =
+            directionAdapterFor(before);
+
+          const [desiredBeforeFlexGrow, desiredAfterFlexGrow] =
+            calculateFlexGrowAfterDrag(
+              {
+                currentFlexGrow: Number(
+                  getComputedStyle(before)['flex-grow'],
+                ),
+                currentSize: getCurrentSize(before),
+                desiredSize: getDesiredSize(before, payload),
+                initialMainSize: initialMainSizes[beforeIndex],
+              },
+              {
+                currentFlexGrow: Number(
+                  getComputedStyle(after)['flex-grow'],
+                ),
+                currentSize: getCurrentSize(after),
+                initialMainSize: initialMainSizes[afterIndex],
+              },
+            );
+
+          dispatch(updateResizableFlex(
+            instanceId,
+            [
+              {index: beforeIndex, flexGrow: desiredBeforeFlexGrow},
+              {index: afterIndex, flexGrow: desiredAfterFlexGrow},
+            ],
+          ));
         },
 
-        ownProps,
+        resizableFlexRefs: map(
+          regions,
+          (region, index) => (element) => {
+            region.current = element;
+            if (isNull(element)) {
+              initialMainSizes[index] = null;
+              return;
+            }
+
+            const flexGrowWas = element.style.flexGrow;
+            const flexShrinkWas = element.style.flexShrink;
+            element.style.flexGrow = element.style.flexShrink = '0';
+            initialMainSizes[index] = directionAdapterFor(element).
+              getCurrentSize(element);
+            element.style.flexGrow = flexGrowWas;
+            element.style.flexShrink = flexShrinkWas;
+          },
+        ),
+      };
+
+      return createSelector(
+        [
+          getResizableFlexGrow,
+          defaultMemoize(
+            (_state, ownProps) => ownProps,
+            shallowequal,
+          ),
+        ],
+        (resizableFlexGrow, ownProps) => merge(
+          {resizableFlexGrow},
+          ownProps,
+          stateIndependentFunctions,
+        ),
       );
     },
     {
diff --git a/yarn.lock b/yarn.lock
index df99160903..c4e8877e48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2474,18 +2474,18 @@ colormin@^1.0.5:
     css-color-names "0.0.4"
     has "^1.0.1"
 
-colors@*, colors@>=0.6.0, colors@^1.1.0, colors@^1.1.2:
+colors@*, colors@>=0.6.0, colors@^1.1.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.4.tgz#e0cb41d3e4b20806b3bfc27f4559f01b94bc2f7c"
 
-colors@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
-
 colors@^1.1.2:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.5.tgz#89c7ad9a374bc030df8013241f68136ed8835afc"
 
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
 combine-lists@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
@@ -9175,6 +9175,10 @@ shallow-copy@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
 
+shallowequal@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"