[6.7] Kill unnecessary re-renders in ElementWrapper (#31734) (#31969)

Backports the following commits to 6.7:
 - Kill unnecessary re-renders in ElementWrapper  (#31734)

x-pack/package.json

@@ -232,6 +232,7 @@
     "react-datetime": "^2.14.0",
     "react-dom": "^16.6.0",
     "react-dropzone": "^4.2.9",
+    "react-fast-compare": "^2.0.4",
     "react-markdown-renderer": "^1.4.0",
     "react-portal": "^3.2.0",
     "react-redux": "^5.0.7",

x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js

@@ -19,28 +19,19 @@ export class ElementWrapper extends React.PureComponent {
     createHandlers: PropTypes.func.isRequired,
   };
 
-  state = {
-    handlers: null,
-  };
-
-  componentDidMount() {
-    // create handlers when component mounts, so it only creates one instance
-    const { createHandlers } = this.props;
-    // eslint-disable-next-line react/no-did-mount-set-state
-    this.setState({ handlers: createHandlers() });
+  constructor(props) {
+    super(props);
+    this._handlers = props.createHandlers(props.selectedPage);
   }
 
-  render() {
-    // wait until the handlers have been created
-    if (!this.state.handlers) {
-      return null;
-    }
+  _handlers = null;
 
+  render() {
     const { renderable, transformMatrix, width, height, state } = this.props;
 
     return (
       <Positionable transformMatrix={transformMatrix} width={width} height={height}>
-        <ElementContent renderable={renderable} state={state} handlers={this.state.handlers} />
+        <ElementContent renderable={renderable} state={state} handlers={this._handlers} />
       </Positionable>
     );
   }

x-pack/plugins/canvas/public/components/element_wrapper/index.js

@@ -6,19 +6,20 @@
 
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { getResolvedArgs, getSelectedPage, isWriteable } from '../../state/selectors/workpad';
+import { compose, shouldUpdate } from 'recompose';
+import isEqual from 'react-fast-compare';
+import { getResolvedArgs, getSelectedPage } from '../../state/selectors/workpad';
 import { getState, getValue, getError } from '../../lib/resolved_arg';
 import { ElementWrapper as Component } from './element_wrapper';
 import { createHandlers as createHandlersWithDispatch } from './lib/handlers';
 
 const mapStateToProps = (state, { element }) => ({
-  isWriteable: isWriteable(state),
   resolvedArg: getResolvedArgs(state, element.id, 'expressionRenderable'),
   selectedPage: getSelectedPage(state),
 });
 
 const mapDispatchToProps = (dispatch, { element }) => ({
-  createHandlers: pageId => () => createHandlersWithDispatch(element, pageId, dispatch),
+  createHandlers: pageId => createHandlersWithDispatch(element, pageId, dispatch),
 });
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
@@ -27,6 +28,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const { id, transformMatrix, width, height } = element;
 
   return {
+    selectedPage,
     ...restProps, // pass through unused props
     id, //pass through useful parts of the element object
     transformMatrix,
@@ -35,14 +37,20 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     state: getState(resolvedArg),
     error: getError(resolvedArg),
     renderable: getValue(resolvedArg),
-    createHandlers: dispatchProps.createHandlers(selectedPage),
+    createHandlers: dispatchProps.createHandlers,
   };
 };
 
-export const ElementWrapper = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
+export const ElementWrapper = compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+    mergeProps,
+    {
+      areOwnPropsEqual: isEqual,
+    }
+  ),
+  shouldUpdate((props, nextProps) => !isEqual(props, nextProps))
 )(Component);
 
 ElementWrapper.propTypes = {

yarn.lock

@@ -17625,6 +17625,11 @@ react-dropzone@^4.2.9:
     attr-accept "^1.1.3"
     prop-types "^15.5.7"
 
+react-fast-compare@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-grid-layout@^0.16.2:
   version "0.16.6"
   resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.6.tgz#9b2407a2b946c2260ebaf66f13b556e1da4efeb2"