[Discussion] Utilize react-memo

package.json

@@ -40,6 +40,7 @@
     "react-addons-update": "^0.14.0",
     "react-event-listener": "^0.1.1",
     "recompose": "^0.15.0",
+    "react-memo": "^0.2.0",
     "simple-assign": "^0.1.0",
     "warning": "^2.1.0"
   },

src/Subheader/Subheader.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import muiThemeable from './../muiThemeable';
+import pure from 'recompose/pure';
+import compose from 'recompose/compose';
+import memoizeStyles from '../utils/memoizeStyles';
+import muiThemeable from '../muiThemeable';
 
 const propTypes = {
   /**
@@ -12,12 +15,6 @@ const propTypes = {
    */
   inset: React.PropTypes.bool,
 
-  /**
-   * The material-ui theme applied to this component.
-   * @ignore
-   */
-  muiTheme: React.PropTypes.object.isRequired,
-
   /**
    * Override the inline-styles of the root element.
    */
@@ -28,43 +25,45 @@ const defaultProps = {
   inset: false,
 };
 
+const styles = {
+  style: [
+    (props) => props.inset,
+    (props) => props.style,
+    (props) => props.muiTheme,
+    (inset, style, muiTheme) => muiTheme.prepareStyles(Object.assign({
+      boxSizing: 'border-box',
+      color: muiTheme.subheader.color,
+      fontSize: 14,
+      fontWeight: muiTheme.subheader.fontWeight,
+      lineHeight: '48px',
+      paddingLeft: inset ? 72 : 16,
+      width: '100%',
+    }, style)),
+  ],
+};
+
 let Subheader = (props) => {
   const {
-    muiTheme,
     children,
-    inset,
     style,
     ...other,
   } = props;
 
-  const {
-    prepareStyles,
-    subheader,
-  } = muiTheme;
-
-  const styles = {
-    root: {
-      boxSizing: 'border-box',
-      color: subheader.color,
-      fontSize: 14,
-      fontWeight: subheader.fontWeight,
-      lineHeight: '48px',
-      paddingLeft: inset ? 72 : 16,
-      width: '100%',
-    },
-  };
-
   return (
-    <div {...other} style={prepareStyles(Object.assign({}, styles.root, style))}>
+    <div {...other} style={style}>
       {children}
     </div>
   );
 };
 
-Subheader.propTypes = propTypes;
-Subheader.defaultProps = defaultProps;
+Subheader = compose(
+  muiThemeable(),
+  pure(),
+  memoizeStyles(styles),
+)(Subheader);
 
-Subheader = muiThemeable()(Subheader);
 Subheader.displayName = 'Subheader';
+Subheader.propTypes = propTypes;
+Subheader.defaultProps = defaultProps;
 
 export default Subheader;

src/divider.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import pure from 'recompose/pure';
+import compose from 'recompose/compose';
+import memoizeStyles from './utils/memoizeStyles';
 import muiThemeable from './muiThemeable';
 
 const propTypes = {
@@ -12,12 +15,6 @@ const propTypes = {
    */
   inset: React.PropTypes.bool,
 
-  /**
-   * The material-ui theme applied to this component.
-   * @ignore
-   */
-  muiTheme: React.PropTypes.object.isRequired,
-
   /**
    * Override the inline-styles of the root element.
    */
@@ -28,38 +25,42 @@ const defaultProps = {
   inset: false,
 };
 
-let Divider = (props) => {
-  const {
-    inset,
-    muiTheme,
-    style,
-    ...other,
-  } = props;
-
-  const {
-    prepareStyles,
-  } = muiTheme;
-
-  const styles = {
-    root: {
+const styles = {
+  style: [
+    (props) => props.inset,
+    (props) => props.style,
+    (props) => props.muiTheme,
+    (inset, style, muiTheme) => muiTheme.prepareStyles(Object.assign({
       margin: 0,
       marginTop: -1,
       marginLeft: inset ? 72 : 0,
       height: 1,
       border: 'none',
-      backgroundColor: muiTheme.rawTheme.palette.borderColor,
-    },
-  };
+      backgroundColor: muiTheme.baseTheme.palette.borderColor,
+    }, style)),
+  ],
+};
+
+let Divider = (props) => {
+  const {
+    className,
+    style,
+    ...other,
+  } = props;
 
   return (
-    <hr {...other} style={prepareStyles(Object.assign({}, styles.root, style))} />
+    <hr {...other} className={className} style={style} />
   );
 };
 
-Divider.propTypes = propTypes;
-Divider.defaultProps = defaultProps;
+Divider = compose(
+  muiThemeable(),
+  pure(),
+  memoizeStyles(styles),
+)(Divider);
 
-Divider = muiThemeable()(Divider);
 Divider.displayName = 'Divider';
+Divider.propTypes = propTypes;
+Divider.defaultProps = defaultProps;
 
 export default Divider;

src/utils/memoizeStyles.js

@@ -0,0 +1,33 @@
+import {createSelector, createWrapper} from 'react-memo';
+
+function transformToSelector(styles) {
+  const selectors = [];
+
+  Object.keys(styles).forEach((key) => {
+    const selector = styles[key];
+
+    if (Array.isArray(selector)) {
+
+      const valueSelectors = selector.slice(0, -1);
+      const propertySelector = selector[selector.length - 1];
+      selectors.push(createSelector(key, valueSelectors, propertySelector));
+
+    } else if (typeof selector === 'function') {
+
+      selectors.push(createSelector(key, selector));
+
+    } else {
+
+      selectors.push(createSelector(key, () => selector));
+
+    }
+  });
+
+  return selectors;
+}
+
+function memoizeStyles(styles) {
+  return (Component) => createWrapper(transformToSelector(styles))(Component);
+}
+
+export default memoizeStyles;