From 1f428d39a1ab001e763825137f05f4c1fda1edbc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 20 Apr 2018 11:38:10 +0100
Subject: [PATCH] Try adding a purify Higher Order Component

---
 data/index.js                         | 14 +++++-------
 editor/components/block-list/block.js |  2 +-
 element/index.js                      | 32 +++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/data/index.js b/data/index.js
index 691033b38d1f2d..186dd9ca548054 100644
--- a/data/index.js
+++ b/data/index.js
@@ -9,7 +9,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component, createHigherOrderComponent, purify } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -242,7 +242,7 @@ export function dispatch( reducerKey ) {
  * @return {Component} Enhanced component with merged state data props.
  */
 export const withSelect = ( mapStateToProps ) => createHigherOrderComponent( ( WrappedComponent ) => {
-	return class ComponentWithSelect extends Component {
+	return purify( class ComponentWithSelect extends Component {
 		constructor() {
 			super( ...arguments );
 
@@ -251,10 +251,6 @@ export const withSelect = ( mapStateToProps ) => createHigherOrderComponent( ( W
 			this.state = {};
 		}
 
-		shouldComponentUpdate( nextProps, nextState ) {
-			return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state );
-		}
-
 		componentWillMount() {
 			this.subscribe();
 
@@ -300,7 +296,7 @@ export const withSelect = ( mapStateToProps ) => createHigherOrderComponent( ( W
 		render() {
 			return <WrappedComponent { ...this.props } { ...this.state.mergeProps } />;
 		}
-	};
+	} );
 }, 'withSelect' );
 
 /**
@@ -316,7 +312,7 @@ export const withSelect = ( mapStateToProps ) => createHigherOrderComponent( ( W
  * @return {Component} Enhanced component with merged dispatcher props.
  */
 export const withDispatch = ( mapDispatchToProps ) => createHigherOrderComponent( ( WrappedComponent ) => {
-	return class ComponentWithDispatch extends Component {
+	return purify( class ComponentWithDispatch extends Component {
 		constructor() {
 			super( ...arguments );
 
@@ -355,7 +351,7 @@ export const withDispatch = ( mapDispatchToProps ) => createHigherOrderComponent
 		render() {
 			return <WrappedComponent { ...this.props } { ...this.proxyProps } />;
 		}
-	};
+	} );
 }, 'withDispatch' );
 
 /**
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 7d5da4e893d4b3..e50825ff706dc8 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -705,5 +705,5 @@ export default compose(
 		};
 	} ),
 	withFilters( 'editor.BlockListBlock' ),
-	withHoverAreas
+	withHoverAreas,
 )( BlockListBlock );
diff --git a/element/index.js b/element/index.js
index ff524b1b7645f1..08151dd32c2dbb 100644
--- a/element/index.js
+++ b/element/index.js
@@ -17,6 +17,7 @@ import {
 	isString,
 	upperFirst,
 } from 'lodash';
+import isShallowEqual from 'shallowequal';
 
 /**
  * Internal dependencies
@@ -209,3 +210,34 @@ export function RawHTML( { children, ...props } ) {
 		...props,
 	} );
 }
+
+/**
+ * Given a component returns the enhanced component augmented with a component
+ * only rerendering when its props/state change
+ *
+ * @param {Function} mapComponentToEnhancedComponent Function mapping component
+ *                                                   to enhanced component.
+ * @param {string}   modifierName                    Seed name from which to
+ *                                                   generated display name.
+ *
+ * @return {WPComponent} Component class with generated display name assigned.
+ */
+export const purify = createHigherOrderComponent( ( Wrapped ) => {
+	if ( Wrapped.prototype instanceof Component ) {
+		return class extends Wrapped {
+			shouldComponentUpdate( nextProps, nextState ) {
+				return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state );
+			}
+		};
+	}
+
+	return class extends Component {
+		shouldComponentUpdate( nextProps ) {
+			return ! isShallowEqual( nextProps, this.props );
+		}
+
+		render() {
+			return <Wrapped { ...this.props } />;
+		}
+	};
+}, 'purify' );