Replace '' + obj pattern with ''.concat(obj)

Using the `+` operator to concatenate strings and objects is problematic because `+` calls `valueOf` on the object. `valueOf` will throw for some types of objects. See #20594 for details. This commit globally replaces `'' + obj` with `''.concat(obj)`, which does the same thing but doesn't call `valueOf` before converting to a string. It also updates the code example in the lint rule that encouaged use of this problematic pattern.
facebook · Aug 16, 2021 · 5fb8b08 · 5fb8b08
1 parent bc4e751
commit 5fb8b08
Show file tree

Hide file tree

Showing 55 changed files with 144 additions and 126 deletions.
diff --git a/fixtures/dom/src/components/fixtures/error-handling/index.js b/fixtures/dom/src/components/fixtures/error-handling/index.js
@@ -41,7 +41,7 @@ class ErrorBoundary extends React.Component {
       if (this.state.error) {
         return <p>Captured an error: {this.state.error.message}</p>;
       } else {
-        return <p>Captured an error: {'' + this.state.error}</p>;
+        return <p>Captured an error: {''.concat(this.state.error)}</p>;
       }
     }
     if (this.state.shouldThrow) {

diff --git a/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.development.js
@@ -104,7 +104,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -483,11 +483,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.development.js
@@ -103,7 +103,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -487,11 +487,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.development.js
@@ -109,7 +109,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -488,11 +488,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.development.js
@@ -108,7 +108,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -492,11 +492,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.development.js
@@ -115,7 +115,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -509,11 +509,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.development.js
@@ -114,7 +114,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -513,11 +513,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js
@@ -107,7 +107,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -815,11 +815,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.development.js
@@ -107,7 +107,7 @@ function printWarning(level, format, args) {
     }
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return ''.concat(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -815,11 +815,11 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
-      key = '' + maybeKey;
+      key = ''.concat(maybeKey);
     }
 
     if (hasValidKey(config)) {
-      key = '' + config.key;
+      key = ''.concat(config.key);
     }
 
     if (hasValidRef(config)) {

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
@@ -82,7 +82,7 @@ function createPanelIfReactLoaded() {
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
-          name: '' + tabId,
+          name: ''.concat(tabId),
         });
         // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
         // so it makes no sense to handle it here.

diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -63,7 +63,7 @@ function getData(internalInstance: InternalInstance) {
   // != used deliberately here to catch undefined and null
   if (internalInstance._currentElement != null) {
     if (internalInstance._currentElement.key) {
-      key = '' + internalInstance._currentElement.key;
+      key = ''.concat(internalInstance._currentElement.key);
     }
 
     const elementType = internalInstance._currentElement.type;

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1838,7 +1838,7 @@ export function attach(
 
       // This check is a guard to handle a React element that has been modified
       // in such a way as to bypass the default stringification of the "key" property.
-      const keyString = key === null ? null : '' + key;
+      const keyString = key === null ? null : ''.concat(key);
       const keyStringID = getStringID(keyString);
 
       pushOperation(TREE_OPERATION_ADD);

diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
@@ -169,7 +169,7 @@ export function format(
   let formatted: string =
     typeof maybeMessage === 'symbol'
       ? maybeMessage.toString()
-      : '' + maybeMessage;
+      : ''.concat(maybeMessage);
 
   // If the first argument is a string, check for substitutions.
   if (typeof maybeMessage === 'string') {
@@ -205,14 +205,15 @@ export function format(
       const arg = args[i];
 
       // Symbols cannot be concatenated with Strings.
-      formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      formatted +=
+        ' ' + (typeof arg === 'symbol' ? arg.toString() : ''.concat(arg));
     }
   }
 
   // Update escaped %% values.
   formatted = formatted.replace(/%{2,2}/g, '%');
 
-  return '' + formatted;
+  return ''.concat(formatted);
 }
 
 export function isSynchronousXHRSupported(): boolean {

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -46,7 +46,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       error !== null &&
       error.hasOwnProperty('message')
         ? error.message
-        : '' + error;
+        : ''.concat(error);
 
     const callStack =
       typeof error === 'object' &&

diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -19,8 +19,8 @@ export function alphaSortEntries(
 ): number {
   const a = entryA[0];
   const b = entryB[0];
-  if ('' + +a === a) {
-    if ('' + +b !== b) {
+  if (''.concat(+a) === a) {
+    if (''.concat(+b) !== b) {
       return -1;
     }
     return +a < +b ? -1 : 1;

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -805,7 +805,7 @@ export function formatDataForPreview(
       return data;
     default:
       try {
-        return truncateForDisplay('' + data);
+        return truncateForDisplay(''.concat(data));
       } catch (error) {
         return 'unserializable';
       }

diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -1575,7 +1575,7 @@ describe('ReactDOMInput', () => {
             return value;
           },
           set: function(val) {
-            value = '' + val;
+            value = ''.concat(val);
             log.push('set property value');
           },
         });

diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -142,7 +142,7 @@ describe('ReactDOMTextarea', () => {
             return value;
           },
           set: function(val) {
-            value = '' + val;
+            value = ''.concat(val);
             counter++;
           },
         });

diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -44,7 +44,7 @@ const expectChildren = function(container, children) {
     } else {
       expect(textNode != null).toBe(true);
       expect(textNode.nodeType).toBe(3);
-      expect(textNode.data).toBe('' + children);
+      expect(textNode.data).toBe(''.concat(children));
     }
   } else {
     let mountIndex = 0;
@@ -55,7 +55,7 @@ const expectChildren = function(container, children) {
       if (typeof child === 'string') {
         textNode = outerNode.childNodes[mountIndex];
         expect(textNode.nodeType).toBe(3);
-        expect(textNode.data).toBe('' + child);
+        expect(textNode.data).toBe(''.concat(child));
         mountIndex++;
       } else {
         const elementDOMNode = outerNode.childNodes[mountIndex];

diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -44,7 +44,7 @@ export function getValueForProperty(
         // If we haven't fully disabled javascript: URLs, and if
         // the hydration is successful of a javascript: URL, we
         // still want to warn on the client.
-        sanitizeURL('' + (expected: any));
+        sanitizeURL(''.concat((expected: any)));
       }
 
       const attributeName = propertyInfo.attributeName;
@@ -60,7 +60,7 @@ export function getValueForProperty(
           if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
             return value;
           }
-          if (value === '' + (expected: any)) {
+          if (value === ''.concat((expected: any))) {
             return expected;
           }
           return value;
@@ -85,7 +85,7 @@ export function getValueForProperty(
 
       if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
         return stringValue === null ? expected : stringValue;
-      } else if (stringValue === '' + (expected: any)) {
+      } else if (stringValue === ''.concat((expected: any))) {
         return expected;
       } else {
         return stringValue;
@@ -119,7 +119,7 @@ export function getValueForAttribute(
       return expected === undefined ? undefined : null;
     }
     const value = node.getAttribute(name);
-    if (value === '' + (expected: any)) {
+    if (value === ''.concat((expected: any))) {
       return expected;
     }
     return value;
@@ -155,7 +155,9 @@ export function setValueForProperty(
       } else {
         node.setAttribute(
           attributeName,
-          enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+          enableTrustedTypesIntegration
+            ? (value: any)
+            : ''.concat((value: any)),
         );
       }
     }
@@ -187,11 +189,11 @@ export function setValueForProperty(
       attributeValue = '';
     } else {
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
-      // ('' + value) makes it output the correct toString()-value.
+      // (''.concat(value)) makes it output the correct toString()-value.
       if (enableTrustedTypesIntegration) {
         attributeValue = (value: any);
       } else {
-        attributeValue = '' + (value: any);
+        attributeValue = ''.concat((value: any));
       }
       if (propertyInfo.sanitizeURL) {
         sanitizeURL(attributeValue.toString());