Using shallow copy to unfreeze React element. It is more efficient than React.cloneElement.

Author: gajus

package.json

@@ -20,8 +20,10 @@
   },
   "license": "BSD-3-Clause",
   "dependencies": {
+    "es6-map": "^0.1.3",
     "hoist-non-react-statics": "^1.0.3",
-    "lodash": "^4.1.0"
+    "lodash": "^4.1.0",
+    "object-unfreeze": "^1.0.0"
   },
   "devDependencies": {
     "chai": "^3.5.0",

src/linkClass.js

@@ -4,66 +4,57 @@ import makeConfiguration from './makeConfiguration';
 import isIterable from './isIterable';
 import parseStyleName from './parseStyleName';
 import generateAppendClassName from './generateAppendClassName';
+import objectUnfreeze from 'object-unfreeze';
 
 let linkElement;
 
 linkElement = (element, styles, configuration) => {
     let appendClassName,
-        children,
+        elementIsFrozen,
         clonedElement,
         newChildren,
         newProps,
         styleNames;
 
-    styleNames = parseStyleName(element.props.styleName || '', configuration.allowMultiple);
+    if (Object.isFrozen && Object.isFrozen(element)) {
+        elementIsFrozen = true;
 
-    if (styleNames.length) {
-        appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound);
+        // https://github.com/facebook/react/blob/v0.13.3/src/classic/element/ReactElement.js#L131
+        element = objectUnfreeze(element);
+        element.props = objectUnfreeze(element.props);
     }
 
-    // element.props.children can be one of the following:
-    // 'text'
-    // ['text']
-    // [ReactElement, 'text']
-    // ReactElement
-
-    children = element.props.children;
+    styleNames = parseStyleName(element.props.styleName || '', configuration.allowMultiple);
 
-    if (React.isValidElement(children)) {
-        newChildren = linkElement(React.Children.only(children), styles, configuration);
-    } else if (_.isArray(children) || isIterable(children)) {
-        newChildren = React.Children.map(children, (node) => {
+    if (React.isValidElement(element.props.children)) {
+        element.props.children = linkElement(React.Children.only(element.props.children), styles, configuration);
+    } else if (_.isArray(element.props.children) || isIterable(element.props.children)) {
+        element.props.children = React.Children.map(element.props.children, (node) => {
             if (React.isValidElement(node)) {
                 return linkElement(node, styles, configuration);
             } else {
                 return node;
             }
         });
-
-        // https://github.com/facebook/react/issues/4723#issuecomment-135555277
-        // Forcing children into an array produces the following error:
-        // Warning: A ReactFragment is an opaque type. Accessing any of its properties is deprecated. Pass it to one of the React.Children helpers.
-        // newChildren = _.values(newChildren);
     }
 
-    if (appendClassName) {
+    if (styleNames.length) {
+        appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound);
+
         if (element.props.className) {
             appendClassName = element.props.className + ' ' + appendClassName;
         }
 
-        newProps = {
-            className: appendClassName,
-            styleName: null
-        };
+        element.props.className = appendClassName;
+        element.props.styleName = null;
     }
 
-    if (newChildren) {
-        clonedElement = React.cloneElement(element, newProps, newChildren);
-    } else {
-        clonedElement = React.cloneElement(element, newProps);
+    if (elementIsFrozen) {
+        Object.freeze(element);
+        Object.freeze(element.props);
     }
 
-    return clonedElement;
+    return element;
 };
 
 /**