From f8ac921e8bba47b9a26cd1ace6e646272bf1970a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 Apr 2020 17:44:30 -0700
Subject: [PATCH 1/4] Filter certain DOM attributes (e.g. src, href) if their
 values are empty strings

This prevents e.g. <img src=""> from making an unnecessar HTTP request for certain browsers.
---
 .../src/__tests__/ReactDOMComponent-test.js   | 87 +++++++++++++++++++
 packages/react-dom/src/shared/DOMProperty.js  | 36 +++++++-
 packages/shared/ReactFeatureFlags.js          |  4 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 11 files changed, 134 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index a25d8f9eff4c..c31709884641 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -445,6 +445,93 @@ describe('ReactDOMComponent', () => {
       expect(node.hasAttribute('data-foo')).toBe(false);
     });
 
+    if (ReactFeatureFlags.enableFilterEmptyStringAttributesDOM) {
+      it('should not add an empty src attribute', () => {
+        const container = document.createElement('div');
+        expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
+          'Invalid value "" (empty string) for attribute `src`.',
+        );
+        const node = container.firstChild;
+        expect(node.hasAttribute('src')).toBe(false);
+
+        ReactDOM.render(<img src="abc" />, container);
+        expect(node.hasAttribute('src')).toBe(true);
+
+        expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
+          'Invalid value "" (empty string) for attribute `src`.',
+        );
+        expect(node.hasAttribute('src')).toBe(false);
+      });
+
+      it('should not add an empty href attribute', () => {
+        const container = document.createElement('div');
+        expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
+          'Invalid value "" (empty string) for attribute `href`.',
+        );
+        const node = container.firstChild;
+        expect(node.hasAttribute('href')).toBe(false);
+
+        ReactDOM.render(<link href="abc" />, container);
+        expect(node.hasAttribute('href')).toBe(true);
+
+        expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
+          'Invalid value "" (empty string) for attribute `href`.',
+        );
+        expect(node.hasAttribute('href')).toBe(false);
+      });
+
+      it('should not add an empty action attribute', () => {
+        const container = document.createElement('div');
+        expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
+          'Invalid value "" (empty string) for attribute `action`.',
+        );
+        const node = container.firstChild;
+        expect(node.hasAttribute('action')).toBe(false);
+
+        ReactDOM.render(<form action="abc" />, container);
+        expect(node.hasAttribute('action')).toBe(true);
+
+        expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
+          'Invalid value "" (empty string) for attribute `action`.',
+        );
+        expect(node.hasAttribute('action')).toBe(false);
+      });
+
+      it('should not add an empty formAction attribute', () => {
+        const container = document.createElement('div');
+        expect(() =>
+          ReactDOM.render(<button formAction="" />, container),
+        ).toErrorDev(
+          'Invalid value "" (empty string) for attribute `formAction`.',
+        );
+        const node = container.firstChild;
+        expect(node.hasAttribute('formAction')).toBe(false);
+
+        ReactDOM.render(<button formAction="abc" />, container);
+        expect(node.hasAttribute('formAction')).toBe(true);
+
+        expect(() =>
+          ReactDOM.render(<button formAction="" />, container),
+        ).toErrorDev(
+          'Invalid value "" (empty string) for attribute `formAction`.',
+        );
+        expect(node.hasAttribute('formAction')).toBe(false);
+      });
+
+      it('should not filter attributes for custom elements', () => {
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <some-custom-element action="" formAction="" href="" src="" />,
+          container,
+        );
+        const node = container.firstChild;
+        expect(node.hasAttribute('action')).toBe(true);
+        expect(node.hasAttribute('formAction')).toBe(true);
+        expect(node.hasAttribute('href')).toBe(true);
+        expect(node.hasAttribute('src')).toBe(true);
+      });
+    }
+
     it('should apply React-specific aliases to HTML elements', () => {
       const container = document.createElement('div');
       ReactDOM.render(<form acceptCharset="foo" />, container);
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 1eb36ead8416..6b9eb13bcaa9 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
+import {
+  enableDeprecatedFlareAPI,
+  enableFilterEmptyStringAttributesDOM,
+} from 'shared/ReactFeatureFlags';
 
 type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -52,6 +55,7 @@ export type PropertyInfo = {|
   +propertyName: string,
   +type: PropertyType,
   +sanitizeURL: boolean,
+  +removeEmptyString: boolean,
 |};
 
 /* eslint-disable max-len */
@@ -163,6 +167,19 @@ export function shouldRemoveAttribute(
     return false;
   }
   if (propertyInfo !== null) {
+    if (enableFilterEmptyStringAttributesDOM) {
+      if (propertyInfo.removeEmptyString && value === '') {
+        if (__DEV__) {
+          console.error(
+            'Invalid value "" (empty string) for attribute `%s`. ' +
+              'Use `null` instead to indicate an empty value.',
+            name,
+          );
+        }
+        return true;
+      }
+    }
+
     switch (propertyInfo.type) {
       case BOOLEAN:
         return !value;
@@ -188,6 +205,7 @@ function PropertyInfoRecord(
   attributeName: string,
   attributeNamespace: string | null,
   sanitizeURL: boolean,
+  removeEmptyString: boolean,
 ) {
   this.acceptsBooleans =
     type === BOOLEANISH_STRING ||
@@ -199,6 +217,7 @@ function PropertyInfoRecord(
   this.propertyName = name;
   this.type = type;
   this.sanitizeURL = sanitizeURL;
+  this.removeEmptyString = removeEmptyString;
 }
 
 // When adding attributes to this list, be sure to also add them to
@@ -232,6 +251,7 @@ reservedProps.forEach(name => {
     name, // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -250,6 +270,7 @@ reservedProps.forEach(name => {
     attributeName, // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -264,6 +285,7 @@ reservedProps.forEach(name => {
     name.toLowerCase(), // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -284,6 +306,7 @@ reservedProps.forEach(name => {
     name, // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -322,6 +345,7 @@ reservedProps.forEach(name => {
     name.toLowerCase(), // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -346,6 +370,7 @@ reservedProps.forEach(name => {
     name, // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -366,6 +391,7 @@ reservedProps.forEach(name => {
     name, // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -387,6 +413,7 @@ reservedProps.forEach(name => {
     name, // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -399,6 +426,7 @@ reservedProps.forEach(name => {
     name.toLowerCase(), // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -497,6 +525,7 @@ const capitalize = token => token[1].toUpperCase();
     attributeName,
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -521,6 +550,7 @@ const capitalize = token => token[1].toUpperCase();
     attributeName,
     'http://www.w3.org/1999/xlink',
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -542,6 +572,7 @@ const capitalize = token => token[1].toUpperCase();
     attributeName,
     'http://www.w3.org/XML/1998/namespace',
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -556,6 +587,7 @@ const capitalize = token => token[1].toUpperCase();
     attributeName.toLowerCase(), // attributeName
     null, // attributeNamespace
     false, // sanitizeURL
+    false, // removeEmptyString
   );
 });
 
@@ -569,6 +601,7 @@ properties[xlinkHref] = new PropertyInfoRecord(
   'xlink:href',
   'http://www.w3.org/1999/xlink',
   true, // sanitizeURL
+  false, // removeEmptyString
 );
 
 ['src', 'href', 'action', 'formAction'].forEach(attributeName => {
@@ -579,5 +612,6 @@ properties[xlinkHref] = new PropertyInfoRecord(
     attributeName.toLowerCase(), // attributeName
     null, // attributeNamespace
     true, // sanitizeURL
+    true, // removeEmptyString
   );
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index b25726f4a8c6..529965c9db6f 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -7,6 +7,10 @@
  * @flow strict
  */
 
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+// This prevents e.g. <img src=""> from making an unnecessar HTTP request for certain browsers.
+export const enableFilterEmptyStringAttributesDOM = false;
+
 // Helps identify side effects in render-phase lifecycle hooks and setState
 // reducers by double invoking them in Strict Mode.
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 1c3813dee899..ce023f9841e6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -44,6 +44,7 @@ export const enableModernEventSystem = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 233f230a8d25..b05a3f6c2c26 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -43,6 +43,7 @@ export const enableModernEventSystem = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 707488ccd209..23f92629eee9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -43,6 +43,7 @@ export const enableModernEventSystem = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 89a6e38c7eba..fb4001be9ed3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -43,6 +43,7 @@ export const enableModernEventSystem = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index da8719641dc5..e0b82d94373f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -43,6 +43,7 @@ export const enableModernEventSystem = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 27d821bc6aa3..f49e7ed3367d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -43,6 +43,7 @@ export const enableModernEventSystem = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index d67bf6be88bb..b7e987cbd513 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -17,6 +17,7 @@ export const warnAboutSpreadingKeyToJSX = __VARIANT__;
 export const enableComponentStackLocations = __VARIANT__;
 export const disableModulePatternComponents = __VARIANT__;
 export const disableInputAttributeSyncing = __VARIANT__;
+export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 
 // These are already tested in both modes using the build type dimension,
 // so we don't need to use __VARIANT__ to get extra coverage.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index f2f53c6c3ba3..47e006820eff 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -24,6 +24,7 @@ export const {
   enableComponentStackLocations,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableModernEventSystem,
+  enableFilterEmptyStringAttributesDOM,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 07f02dc4d97d0024d120ce2b04ffacd497f6784b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 Apr 2020 22:06:36 -0700
Subject: [PATCH 2/4] Expanded warning recommendation

---
 packages/react-dom/src/shared/DOMProperty.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 6b9eb13bcaa9..4c268ad4efa3 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -172,7 +172,8 @@ export function shouldRemoveAttribute(
         if (__DEV__) {
           console.error(
             'Invalid value "" (empty string) for attribute `%s`. ' +
-              'Use `null` instead to indicate an empty value.',
+              'This will be a no-op. Either do not render the element at all ' +
+              'or use `null` instead to indicate an empty value.',
             name,
           );
         }

From e0e2ab5b2cce3d5990d19acc5be6cebd07991f2a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 Apr 2020 08:17:36 -0700
Subject: [PATCH 3/4] Improved error message

---
 .../src/__tests__/ReactDOMComponent-test.js      | 16 ++++++++--------
 packages/react-dom/src/shared/DOMProperty.js     |  7 ++++---
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index c31709884641..1eb8c9786994 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -449,7 +449,7 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty src attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
-          'Invalid value "" (empty string) for attribute `src`.',
+          'An empty string ("") was passed to the src attribute.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('src')).toBe(false);
@@ -458,7 +458,7 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('src')).toBe(true);
 
         expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
-          'Invalid value "" (empty string) for attribute `src`.',
+          'An empty string ("") was passed to the src attribute.',
         );
         expect(node.hasAttribute('src')).toBe(false);
       });
@@ -466,7 +466,7 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty href attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
-          'Invalid value "" (empty string) for attribute `href`.',
+          'An empty string ("") was passed to the href attribute.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('href')).toBe(false);
@@ -475,7 +475,7 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('href')).toBe(true);
 
         expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
-          'Invalid value "" (empty string) for attribute `href`.',
+          'An empty string ("") was passed to the href attribute.',
         );
         expect(node.hasAttribute('href')).toBe(false);
       });
@@ -483,7 +483,7 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty action attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
-          'Invalid value "" (empty string) for attribute `action`.',
+          'An empty string ("") was passed to the action attribute.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('action')).toBe(false);
@@ -492,7 +492,7 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('action')).toBe(true);
 
         expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
-          'Invalid value "" (empty string) for attribute `action`.',
+          'An empty string ("") was passed to the action attribute.',
         );
         expect(node.hasAttribute('action')).toBe(false);
       });
@@ -502,7 +502,7 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactDOM.render(<button formAction="" />, container),
         ).toErrorDev(
-          'Invalid value "" (empty string) for attribute `formAction`.',
+          'An empty string ("") was passed to the formAction attribute.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('formAction')).toBe(false);
@@ -513,7 +513,7 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactDOM.render(<button formAction="" />, container),
         ).toErrorDev(
-          'Invalid value "" (empty string) for attribute `formAction`.',
+          'An empty string ("") was passed to the formAction attribute.',
         );
         expect(node.hasAttribute('formAction')).toBe(false);
       });
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 4c268ad4efa3..778ee6a47172 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -171,9 +171,10 @@ export function shouldRemoveAttribute(
       if (propertyInfo.removeEmptyString && value === '') {
         if (__DEV__) {
           console.error(
-            'Invalid value "" (empty string) for attribute `%s`. ' +
-              'This will be a no-op. Either do not render the element at all ' +
-              'or use `null` instead to indicate an empty value.',
+            'An empty string ("") was passed to the %s attribute. ' +
+              'To fix this, either do not render the element at all ' +
+              'or pass null to %s instead of an empty string.',
+            name,
             name,
           );
         }

From 2399b8240cdbe2aea3b8b9dd0d40ea52ca9b3fc1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 Apr 2020 08:46:49 -0700
Subject: [PATCH 4/4] Further refined error message

---
 .../src/__tests__/ReactDOMComponent-test.js   | 34 ++++++++++++++-----
 packages/react-dom/src/shared/DOMProperty.js  | 25 ++++++++++----
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 1eb8c9786994..5df5d8b294a0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -449,7 +449,10 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty src attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the src attribute.',
+          'An empty string ("") was passed to the src attribute. ' +
+            'This may cause the browser to download the whole page again over the network. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to src instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('src')).toBe(false);
@@ -458,7 +461,10 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('src')).toBe(true);
 
         expect(() => ReactDOM.render(<img src="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the src attribute.',
+          'An empty string ("") was passed to the src attribute. ' +
+            'This may cause the browser to download the whole page again over the network. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to src instead of an empty string.',
         );
         expect(node.hasAttribute('src')).toBe(false);
       });
@@ -466,7 +472,9 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty href attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the href attribute.',
+          'An empty string ("") was passed to the href attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to href instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('href')).toBe(false);
@@ -475,7 +483,9 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('href')).toBe(true);
 
         expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the href attribute.',
+          'An empty string ("") was passed to the href attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to href instead of an empty string.',
         );
         expect(node.hasAttribute('href')).toBe(false);
       });
@@ -483,7 +493,9 @@ describe('ReactDOMComponent', () => {
       it('should not add an empty action attribute', () => {
         const container = document.createElement('div');
         expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the action attribute.',
+          'An empty string ("") was passed to the action attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to action instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('action')).toBe(false);
@@ -492,7 +504,9 @@ describe('ReactDOMComponent', () => {
         expect(node.hasAttribute('action')).toBe(true);
 
         expect(() => ReactDOM.render(<form action="" />, container)).toErrorDev(
-          'An empty string ("") was passed to the action attribute.',
+          'An empty string ("") was passed to the action attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to action instead of an empty string.',
         );
         expect(node.hasAttribute('action')).toBe(false);
       });
@@ -502,7 +516,9 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactDOM.render(<button formAction="" />, container),
         ).toErrorDev(
-          'An empty string ("") was passed to the formAction attribute.',
+          'An empty string ("") was passed to the formAction attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to formAction instead of an empty string.',
         );
         const node = container.firstChild;
         expect(node.hasAttribute('formAction')).toBe(false);
@@ -513,7 +529,9 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactDOM.render(<button formAction="" />, container),
         ).toErrorDev(
-          'An empty string ("") was passed to the formAction attribute.',
+          'An empty string ("") was passed to the formAction attribute. ' +
+            'To fix this, either do not render the element at all ' +
+            'or pass null to formAction instead of an empty string.',
         );
         expect(node.hasAttribute('formAction')).toBe(false);
       });
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 778ee6a47172..68a2188b9850 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -170,13 +170,24 @@ export function shouldRemoveAttribute(
     if (enableFilterEmptyStringAttributesDOM) {
       if (propertyInfo.removeEmptyString && value === '') {
         if (__DEV__) {
-          console.error(
-            'An empty string ("") was passed to the %s attribute. ' +
-              'To fix this, either do not render the element at all ' +
-              'or pass null to %s instead of an empty string.',
-            name,
-            name,
-          );
+          if (name === 'src') {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'This may cause the browser to download the whole page again over the network. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              name,
+              name,
+            );
+          } else {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              name,
+              name,
+            );
+          }
         }
         return true;
       }