Unperformant Stringify Warning - WIP

packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

@@ -155,5 +155,43 @@ describe('DOMPropertyOperations', () => {
       expect(container.firstChild.getAttribute('value')).toBe('foo');
       expect(container.firstChild.value).toBe('foo');
     });
+
+    it('should warn if custom attributes take too long to stringify', () => {
+      const container = document.createElement('div');
+      const attributeValue = {foo: 'bar'};
+      attributeValue.toString = function() {
+        // finds 2000th prime to waste time
+        nthPrime(1225);
+        let originalToString = Object.prototype.toString;
+        return originalToString.apply(this);
+      };
+
+      const nthPrime = n => {
+        let sieve = [2];
+        let current = 3;
+        let prime;
+
+        while (sieve.length < n) {
+          current += 2;
+          if (current % 2 === 0) {
+            continue;
+          }
+          prime = true;
+          for (let j in sieve) {
+            if (current % sieve[j] === 0) {
+              prime = false;
+              break;
+            }
+          }
+          if (prime) {
+            sieve.push(current);
+          }
+        }
+        return current;
+      };
+      expect(() =>
+        ReactDOM.render(<div data-foo={attributeValue} />, container),
+      ).toWarnDev('Stringifying your attribute is causing perfomance issues');
+    });
   });
 });

packages/react-dom/src/client/DOMPropertyOperations.js

@@ -15,6 +15,7 @@ import {
   BOOLEAN,
   OVERLOADED_BOOLEAN,
 } from '../shared/DOMProperty';
+import warning from 'fbjs/lib/warning';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -132,8 +133,13 @@ export function setValueForProperty(
       const attributeName = name;
       if (value === null) {
         node.removeAttribute(attributeName);
+      } else if (__DEV__) {
+        node.setAttribute(
+          attributeName,
+          stringifyWithPerformanceWarning(value),
+        );
       } else {
-        node.setAttribute(attributeName, '' + (value: any));
+        node.setAttribute(attributeName, (value: any).toString());
       }
     }
     return;
@@ -160,10 +166,12 @@ export function setValueForProperty(
     let attributeValue;
     if (type === BOOLEAN || (type === OVERLOADED_BOOLEAN && value === true)) {
       attributeValue = '';
+    } else if (__DEV__) {
+      attributeValue = stringifyWithPerformanceWarning(value);
     } else {
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
-      attributeValue = '' + (value: any);
+      attributeValue = (value: any).toString();
     }
     if (attributeNamespace) {
       node.setAttributeNS(attributeNamespace, attributeName, attributeValue);
@@ -172,3 +180,17 @@ export function setValueForProperty(
     }
   }
 }
+
+// Only used in DEV, stringifies a value and Warns if it took too long
+const stringifyWithPerformanceWarning = value => {
+  const stringifyStart = Date.now();
+  let attributeValue = (value: any).toString();
+  const stringifyEnd = Date.now();
+
+  warning(
+    stringifyEnd - stringifyStart <= 2,
+    'Stringifying your attribute is causing perfomance issues',
+  );
+
+  return attributeValue;
+};