From c88fb49d37fd01024e0a254a37b7810d107bdd1d Mon Sep 17 00:00:00 2001
From: Justin Grant <justingrant@users.noreply.github.com>
Date: Mon, 27 Sep 2021 10:05:07 -0700
Subject: [PATCH] Improve DEV errors if string coercion throws (Temporal.*,
 Symbol, etc.) (#22064)

* Revise ESLint rules for string coercion

Currently, react uses `'' + value` to coerce mixed values to strings.
This code will throw for Temporal objects or symbols.

To make string-coercion safer and to improve user-facing error messages,
This commit adds a new ESLint rule called `safe-string-coercion`.

This rule has two modes: a production mode and a non-production mode.
* If the `isProductionUserAppCode` option is true, then `'' + value`
  coercions are allowed (because they're faster, although they may
  throw) and `String(value)` coercions are disallowed. Exception:
  when building error messages or running DEV-only code in prod
  files, `String()` should be used because it won't throw.
* If the `isProductionUserAppCode` option is false, then `'' + value`
  coercions are disallowed (because they may throw, and in non-prod
  code it's not worth the risk) and `String(value)` are allowed.

Production mode is used for all files which will be bundled with
developers' userland apps. Non-prod mode is used for all other React
code: tests, DEV blocks, devtools extension, etc.

In production mode, in addiiton to flagging `String(value)` calls,
the rule will also flag `'' + value` or `value + ''` coercions that may
throw. The rule is smart enough to silence itself in the following
"will never throw" cases:
* When the coercion is wrapped in a `typeof` test that restricts to safe
  (non-symbol, non-object) types. Example:
    if (typeof value === 'string' || typeof value === 'number') {
      thisWontReport('' + value);
    }
* When what's being coerced is a unary function result, because unary
   functions never return an object or a symbol.
* When the coerced value is a commonly-used numeric identifier:
  `i`, `idx`, or `lineNumber`.
* When the statement immeidately before the coercion is a DEV-only
  call to a function from shared/CheckStringCoercion.js. This call is a
  no-op in production, but in DEV it will show a console error
  explaining the problem, then will throw right after a long explanatory
  code comment so that debugger users will have an idea what's going on.
  The check function call must be in the following format:
    if (__DEV__) {
      checkXxxxxStringCoercion(value);
    };

Manually disabling the rule is usually not necessary because almost all
prod use of the `'' + value` pattern falls into one of the categories
above. But in the rare cases where the rule isn't smart enough to detect
safe usage (e.g. when a coercion is inside a nested ternary operator),
manually disabling the rule will be needed.

The rule should also be manually disabled in prod error handling code
where `String(value)` should be used for coercions, because it'd be
bad to throw while building an error message or stack trace!

The prod and non-prod modes have differentiated error messages to
explain how to do a proper coercion in that mode.

If a production check call is needed but is missing or incorrect
(e.g. not in a DEV block or not immediately before the coercion), then
a context-sensitive error message will be reported so that developers
can figure out what's wrong and how to fix the problem.

Because string coercions are now handled by the `safe-string-coercion`
rule, the `no-primitive-constructor` rule no longer flags `String()`
usage. It still flags `new String(value)` because that usage is almost
always a bug.

* Add DEV-only string coercion check functions

This commit adds DEV-only functions to check whether coercing
values to strings using the `'' + value` pattern will throw. If it will
throw, these functions will:
1. Display a console error with a friendly error message describing
   the problem and the developer can fix it.
2. Perform the coercion, which will throw. Right before the line where
   the throwing happens, there's a long code comment that will help
   debugger users (or others looking at the exception call stack) figure
   out what happened and how to fix the problem.

One of these check functions should be called before all string coercion
of user-provided values, except when the the coercion is guaranteed not
to throw, e.g.
* if inside a typeof check like `if (typeof value === 'string')`
* if coercing the result of a unary function like `+value` or `value++`
* if coercing a variable named in a whitelist of numeric identifiers:
  `i`, `idx`, or `lineNumber`.

The new `safe-string-coercion` internal ESLint rule enforces that
these check functions are called when they are required.

Only use these check functions in production code that will be bundled
with user apps.  For non-prod code (and for production error-handling
code), use `String(value)` instead which may be a little slower but will
never throw.

* Add failing tests for string coercion

Added failing tests to verify:
* That input, select, and textarea elements with value and defaultValue
  set to Temporal-like objects which will throw when coerced to string
  using the `'' + value` pattern.
* That text elements will throw for Temporal-like objects
* That dangerouslySetInnerHTML will *not* throw for Temporal-like
  objects because this value is not cast to a string before passing to
  the DOM.
* That keys that are Temporal-like objects will throw

All tests above validate the friendly error messages thrown.

* Use `String(value)` for coercion in non-prod files

This commit switches non-production code from `'' + value` (which
throws for Temporal objects and symbols) to instead use `String(value)`
which won't throw for these or other future plus-phobic types.

"Non-produciton code" includes anything not bundled into user apps:
* Tests and test utilities. Note that I didn't change legacy React
  test fixtures because I assumed it was good for those files to
  act just like old React, including coercion behavior.
* Build scripts
* Dev tools package - In addition to switching to `String`, I also
  removed special-case code for coercing symbols which is now
  unnecessary.

* Add DEV-only string coercion checks to prod files

This commit adds DEV-only function calls to to check if string coercion
using `'' + value` will throw, which it will if the value is a Temporal
object or a symbol because those types can't be added with `+`.

If it will throw, then in DEV these checks will show a console error
to help the user undertsand what went wrong and how to fix the
problem. After emitting the console error, the check functions will
retry the coercion which will throw with a call stack that's easy (or
at least easier!) to troubleshoot because the exception happens right
after a long comment explaining the issue. So whether the user is in
a debugger, looking at the browser console, or viewing the in-browser
DEV call stack, it should be easy to understand and fix the problem.

In most cases, the safe-string-coercion ESLint rule is smart enough to
detect when a coercion is safe. But in rare cases (e.g. when a coercion
is inside a ternary) this rule will have to be manually disabled.

This commit also switches error-handling code to use `String(value)`
for coercion, because it's bad to crash when you're trying to build
an error message or a call stack!  Because `String()` is usually
disallowed by the `safe-string-coercion` ESLint rule in production
code, the rule must be disabled when `String()` is used.
---
 .eslintrc.js                                  |  13 +-
 dangerfile.js                                 |   4 +-
 .../fixtures/error-handling/index.js          |   2 +-
 .../ReactHooksInspectionIntegration-test.js   |   4 +-
 .../react-devtools-extensions/src/main.js     |   2 +-
 .../src/backend/legacy/renderer.js            |   2 +-
 .../src/backend/renderer.js                   |   2 +-
 .../src/backend/utils.js                      |  13 +-
 .../views/ErrorBoundary/ErrorBoundary.js      |   2 +-
 .../src/devtools/views/utils.js               |   4 +-
 packages/react-devtools-shared/src/hook.js    |  12 +-
 .../src/hooks/SourceMapMetadataConsumer.js    |   1 -
 packages/react-devtools-shared/src/utils.js   |   2 +-
 .../src/__tests__/ReactDOMAttribute-test.js   |  21 ++
 .../src/__tests__/ReactDOMComponent-test.js   |  48 ++-
 .../src/__tests__/ReactDOMInput-test.js       |  98 ++++-
 .../src/__tests__/ReactDOMSelect-test.js      | 264 ++++++++++++++
 .../ReactDOMServerIntegrationHooks-test.js    |  10 +-
 ...erIntegrationUntrustedURL-test.internal.js |   5 +
 .../__tests__/ReactDOMTextComponent-test.js   |  22 ++
 .../src/__tests__/ReactDOMTextarea-test.js    |  32 +-
 .../src/__tests__/ReactIdentity-test.js       |  29 ++
 .../src/__tests__/ReactMultiChildText-test.js |   4 +-
 .../src/client/DOMPropertyOperations.js       |  20 +
 .../react-dom/src/client/ReactDOMComponent.js |   4 +
 .../react-dom/src/client/ReactDOMInput.js     |   4 +
 .../react-dom/src/client/ToStringValue.js     |  10 +-
 .../src/client/inputValueTracking.js          |  11 +
 .../src/server/DOMMarkupOperations.js         |   4 +
 .../src/server/ReactDOMServerFormatConfig.js  |  35 ++
 .../src/server/ReactPartialRenderer.js        |  19 +
 .../src/server/escapeTextForBrowser.js        |   5 +
 .../src/shared/dangerousStyleValue.js         |   4 +
 .../src/test-utils/ReactTestUtils.js          |   2 +-
 .../src/createReactNoop.js                    |  17 +-
 .../src/ReactChildFiber.new.js                |   4 +
 .../src/ReactChildFiber.old.js                |   4 +
 packages/react-reconciler/src/ReactPortal.js  |   4 +
 .../src/__tests__/ReactCache-test.js          |   2 +-
 .../ReactHooksWithNoopRenderer-test.js        |  16 +-
 .../src/__tests__/ReactIncremental-test.js    |   4 +-
 .../src/__tests__/ReactMemo-test.js           |   2 +-
 .../src/__tests__/ReactPersistent-test.js     |   2 +-
 .../react-server/src/ReactFlightServer.js     |   8 +-
 .../src/ReactTestRenderer.js                  |   4 +
 packages/react/src/ReactChildren.js           |  16 +-
 packages/react/src/ReactElement.js            |  19 +
 packages/react/src/jsx/ReactJSXElement.js     |  13 +
 packages/shared/CheckStringCoercion.js        | 167 +++++++++
 packages/shared/consoleWithStackDev.js        |   3 +-
 ...no-primitive-constructors-test.internal.js |   8 +-
 .../safe-string-coercion-test.internal.js     | 265 ++++++++++++++
 scripts/eslint-rules/index.js                 |   1 +
 .../eslint-rules/no-primitive-constructors.js |  13 +-
 scripts/eslint-rules/safe-string-coercion.js  | 344 ++++++++++++++++++
 scripts/flow/runFlow.js                       |   4 +-
 scripts/merge-fork/merge-fork.js              |   4 +-
 scripts/rollup/build-all-release-channels.js  |   8 +-
 58 files changed, 1561 insertions(+), 85 deletions(-)
 create mode 100644 packages/shared/CheckStringCoercion.js
 create mode 100644 scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
 create mode 100644 scripts/eslint-rules/safe-string-coercion.js

diff --git a/.eslintrc.js b/.eslintrc.js
index a155becfafb67..23d5ab76c32bc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -108,6 +108,10 @@ module.exports = {
     // CUSTOM RULES
     // the second argument of warning/invariant should be a literal string
     'react-internal/no-primitive-constructors': ERROR,
+    'react-internal/safe-string-coercion': [
+      ERROR,
+      {isProductionUserAppCode: true},
+    ],
     'react-internal/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/invariant-args': ERROR,
     'react-internal/warning-args': ERROR,
@@ -168,10 +172,17 @@ module.exports = {
         'packages/*/npm/**/*.js',
         'packages/dom-event-testing-library/**/*.js',
         'packages/react-devtools*/**/*.js',
+        'dangerfile.js',
+        'fixtures',
+        'packages/react-dom/src/test-utils/*.js',
       ],
       rules: {
         'react-internal/no-production-logging': OFF,
         'react-internal/warning-args': OFF,
+        'react-internal/safe-string-coercion': [
+          ERROR,
+          {isProductionUserAppCode: false},
+        ],
 
         // Disable accessibility checks
         'jsx-a11y/aria-role': OFF,
@@ -185,7 +196,7 @@ module.exports = {
     {
       files: [
         'scripts/eslint-rules/*.js',
-        'packages/eslint-plugin-react-hooks/src/*.js'
+        'packages/eslint-plugin-react-hooks/src/*.js',
       ],
       plugins: ['eslint-plugin'],
       rules: {
diff --git a/dangerfile.js b/dangerfile.js
index e6a6a82c87086..f612c80a7e545 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -102,8 +102,8 @@ function row(result) {
   let headSha;
   let baseSha;
   try {
-    headSha = (readFileSync(HEAD_DIR + '/COMMIT_SHA') + '').trim();
-    baseSha = (readFileSync(BASE_DIR + '/COMMIT_SHA') + '').trim();
+    headSha = String(readFileSync(HEAD_DIR + '/COMMIT_SHA')).trim();
+    baseSha = String(readFileSync(BASE_DIR + '/COMMIT_SHA')).trim();
   } catch {
     warn(
       "Failed to read build artifacts. It's possible a build configuration " +
diff --git a/fixtures/dom/src/components/fixtures/error-handling/index.js b/fixtures/dom/src/components/fixtures/error-handling/index.js
index 5bbeec7de447e..904bef4788c56 100644
--- 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: {String(this.state.error)}</p>;
       }
     }
     if (this.state.shouldThrow) {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index b13bec22d213c..013caecb11ba0 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -615,7 +615,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect((tree[0].value + '').startsWith('c_')).toBe(true);
+    expect(String(tree[0].value).startsWith('c_')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
@@ -646,7 +646,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect((tree[0].value + '').startsWith('c_')).toBe(true);
+    expect(String(tree[0].value).startsWith('c_')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 9d5b4da02e409..eb093fc51b785 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -94,7 +94,7 @@ function createPanelIfReactLoaded() {
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
-          name: '' + tabId,
+          name: String(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
index 24f30b87bc78a..1f0aed404087a 100644
--- 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 = String(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
index 78953e72979a4..24a00583e7e68 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1848,7 +1848,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 : String(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
index 4b40645595d1c..09f821f4e1877 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -166,11 +166,7 @@ export function format(
 ): string {
   const args = inputArgs.slice();
 
-  // Symbols cannot be concatenated with Strings.
-  let formatted: string =
-    typeof maybeMessage === 'symbol'
-      ? maybeMessage.toString()
-      : '' + maybeMessage;
+  let formatted: string = String(maybeMessage);
 
   // If the first argument is a string, check for substitutions.
   if (typeof maybeMessage === 'string') {
@@ -203,17 +199,14 @@ export function format(
   // Arguments that remain after formatting.
   if (args.length) {
     for (let i = 0; i < args.length; i++) {
-      const arg = args[i];
-
-      // Symbols cannot be concatenated with Strings.
-      formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      formatted += ' ' + String(args[i]);
     }
   }
 
   // Update escaped %% values.
   formatted = formatted.replace(/%{2,2}/g, '%');
 
-  return '' + formatted;
+  return String(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
index c7aa20dcd5902..ea4f54b1a9b8b 100644
--- 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;
+        : String(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
index b326996daa05a..035d9f83a3bc5 100644
--- 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 (String(+a) === a) {
+    if (String(+b) !== b) {
       return -1;
     }
     return +a < +b ? -1 : 1;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 152b1dce8f8e4..6f34f86132ab6 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -180,10 +180,7 @@ export function installHook(target: any): DevToolsHook | null {
     const args = inputArgs.slice();
 
     // Symbols cannot be concatenated with Strings.
-    let formatted: string =
-      typeof maybeMessage === 'symbol'
-        ? maybeMessage.toString()
-        : '' + maybeMessage;
+    let formatted = String(maybeMessage);
 
     // If the first argument is a string, check for substitutions.
     if (typeof maybeMessage === 'string') {
@@ -216,17 +213,14 @@ export function installHook(target: any): DevToolsHook | null {
     // Arguments that remain after formatting.
     if (args.length) {
       for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-
-        // Symbols cannot be concatenated with Strings.
-        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+        formatted += ' ' + String(args[i]);
       }
     }
 
     // Update escaped %% values.
     formatted = formatted.replace(/%{2,2}/g, '%');
 
-    return '' + formatted;
+    return String(formatted);
   }
 
   let unpatchFn = null;
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
index 250192c7fa4b3..4882afba9a9fb 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
@@ -38,7 +38,6 @@ function normalizeSourcePath(
   const {sourceRoot} = map;
   let source = sourceInput;
 
-  // eslint-disable-next-line react-internal/no-primitive-constructors
   source = String(source);
   // Some source maps produce relative source paths like "./foo.js" instead of
   // "foo.js".  Normalize these first so that future comparisons will succeed.
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 7c9e2fbd25f8a..9ec19e3afde41 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -834,7 +834,7 @@ export function formatDataForPreview(
       return data;
     default:
       try {
-        return truncateForDisplay('' + data);
+        return truncateForDisplay(String(data));
       } catch (error) {
         return 'unserializable';
       }
diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
index aa91857b48009..e240708667f21 100644
--- a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
@@ -89,6 +89,27 @@ describe('ReactDOM unknown attribute', () => {
       testUnknownAttributeAssignment(lol, 'lol');
     });
 
+    it('throws with Temporal-like objects', () => {
+      class TemporalLike {
+        valueOf() {
+          // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+          // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+          throw new TypeError('prod message');
+        }
+        toString() {
+          return '2020-01-01';
+        }
+      }
+      const test = () =>
+        testUnknownAttributeAssignment(new TemporalLike(), null);
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Warning: The provided `unknown` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
     it('removes symbols and warns', () => {
       expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toErrorDev(
         'Warning: Invalid value for prop `unknown` on <div> tag. Either remove it ' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 2911099e8e932..fb7d7cf41ada3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -254,6 +254,28 @@ describe('ReactDOMComponent', () => {
       ReactDOM.render(<span style={style} />, div);
     });
 
+    it('throws with Temporal-like objects as style values', () => {
+      class TemporalLike {
+        valueOf() {
+          // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+          // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+          throw new TypeError('prod message');
+        }
+        toString() {
+          return '2020-01-01';
+        }
+      }
+      const style = {fontSize: new TemporalLike()};
+      const div = document.createElement('div');
+      const test = () => ReactDOM.render(<span style={style} />, div);
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Warning: The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
     it('should update styles if initially null', () => {
       let styles = null;
       const container = document.createElement('div');
@@ -1130,7 +1152,7 @@ describe('ReactDOMComponent', () => {
 
   describe('createOpenTagMarkup', () => {
     function quoteRegexp(str) {
-      return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
+      return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
     function expectToHaveAttribute(actual, expected) {
@@ -1164,7 +1186,7 @@ describe('ReactDOMComponent', () => {
 
   describe('createContentMarkup', () => {
     function quoteRegexp(str) {
-      return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
+      return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
     function genMarkup(props) {
@@ -2412,6 +2434,28 @@ describe('ReactDOMComponent', () => {
       expect(el.getAttribute('whatever')).toBe('[object Object]');
     });
 
+    it('allows Temporal-like objects as HTML (they are not coerced to strings first)', function() {
+      class TemporalLike {
+        valueOf() {
+          // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+          // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+          throw new TypeError('prod message');
+        }
+        toString() {
+          return '2020-01-01';
+        }
+      }
+
+      // `dangerouslySetInnerHTML` is never coerced to a string, so won't throw
+      // even with a Temporal-like object.
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: new TemporalLike()}} />,
+        container,
+      );
+      expect(container.firstChild.innerHTML).toEqual('2020-01-01');
+    });
+
     it('allows cased data attributes', function() {
       let el;
       expect(() => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 018dd14697f08..fb2c4bbc380c5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -544,6 +544,102 @@ describe('ReactDOMInput', () => {
     expect(node.value).toBe('foobar');
   });
 
+  it('should throw for date inputs if `defaultValue` is an object where valueOf() throws', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const test = () =>
+      ReactDOM.render(
+        <input defaultValue={new TemporalLike()} type="date" />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
+  it('should throw for text inputs if `defaultValue` is an object where valueOf() throws', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const test = () =>
+      ReactDOM.render(
+        <input defaultValue={new TemporalLike()} type="text" />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
+  it('should throw for date inputs if `value` is an object where valueOf() throws', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const test = () =>
+      ReactDOM.render(
+        <input value={new TemporalLike()} type="date" onChange={() => {}} />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
+  it('should throw for text inputs if `value` is an object where valueOf() throws', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const test = () =>
+      ReactDOM.render(
+        <input value={new TemporalLike()} type="text" onChange={() => {}} />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
   it('should display `value` of number 0', () => {
     const stub = <input type="text" value={0} onChange={emptyFunction} />;
     const node = ReactDOM.render(stub, container);
@@ -1575,7 +1671,7 @@ describe('ReactDOMInput', () => {
             return value;
           },
           set: function(val) {
-            value = '' + val;
+            value = String(val);
             log.push('set property value');
           },
         });
diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index 3368f09f585ac..08353e11da70c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -1019,4 +1019,268 @@ describe('ReactDOMSelect', () => {
       expect(node.value).toBe('');
     });
   });
+
+  describe('When given a Temporal.PlainDate-like value', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+
+    it('throws when given a Temporal.PlainDate-like value (select)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value={new TemporalLike()}>
+            <option value="2020-01-01">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (option)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value="2020-01-01">
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (both)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value={new TemporalLike()}>
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (select)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <select onChange={noop} value="monkey">
+          <option value="2020-01-01">like a Temporal.PlainDate</option>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+        </select>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value={new TemporalLike()}>
+            <option value="2020-01-01">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (option)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <select onChange={noop} value="2020-01-01">
+          <option value="donkey">like a Temporal.PlainDate</option>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+        </select>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value="2020-01-01">
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (both)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <select onChange={noop} value="donkey">
+          <option value="donkey">like a Temporal.PlainDate</option>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+        </select>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value={new TemporalLike()}>
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (select)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} defaultValue={new TemporalLike()}>
+            <option value="2020-01-01">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (option)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} defaultValue="2020-01-01">
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (both)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} defaultValue={new TemporalLike()}>
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like defaultValue (select)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <select onChange={noop} defaultValue="monkey">
+          <option value="2020-01-01">like a Temporal.PlainDate</option>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+        </select>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} defaultValue={new TemporalLike()}>
+            <option value="2020-01-01">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like defaultValue (both)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <select onChange={noop} defaultValue="monkey">
+          <option value="donkey">like a Temporal.PlainDate</option>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+        </select>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <select onChange={noop} value={new TemporalLike()}>
+            <option value={new TemporalLike()}>
+              like a Temporal.PlainDate
+            </option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 53a34b25ffd55..a27954785f7ea 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -1745,7 +1745,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
@@ -1769,7 +1769,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
@@ -1793,7 +1793,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns if you try to use the result as a string in a child component', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
@@ -1817,7 +1817,7 @@ describe('ReactDOMServerHooks', () => {
     it('useOpaqueIdentifier warns if you try to use the result as a string', async () => {
       function App() {
         const id = useOpaqueIdentifier();
-        return <div aria-labelledby={id + ''} />;
+        return <div aria-labelledby={String(id)} />;
       }
 
       const container = document.createElement('div');
@@ -1836,7 +1836,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns if you try to use the result as a string in a child component wrapped in a Suspense', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
index 9fb48b3bce24c..72291c9959ee0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
@@ -242,6 +242,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
       // consistency but the code structure makes that hard right now.
       expectedToStringCalls = 2;
     }
+    if (__DEV__) {
+      // Checking for string coercion problems results in double the
+      // toString calls in DEV
+      expectedToStringCalls *= 2;
+    }
 
     let toStringCalls = 0;
     const firstIsSafe = {
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
index ddc3a979597e3..24ff139085d96 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
@@ -284,4 +284,26 @@ describe('ReactDOMTextComponent', () => {
     ReactDOM.render(<div />, el);
     expect(el.innerHTML).toBe('<div></div>');
   });
+
+  it('throws for Temporal-like text nodes', () => {
+    const el = document.createElement('div');
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    expect(() =>
+      ReactDOM.render(<div>{new TemporalLike()}</div>, el),
+    ).toThrowError(
+      new Error(
+        'Objects are not valid as a React child (found: object with keys {}).' +
+          ' If you meant to render a collection of children, use an array instead.',
+      ),
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 4d56f53d9e40c..f8bec6c4ba97d 100644
--- 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 = String(val);
             counter++;
           },
         });
@@ -219,6 +219,36 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toEqual('foo');
   });
 
+  it('should throw when value is set to a Temporal-like object', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const container = document.createElement('div');
+    const stub = <textarea value="giraffe" onChange={emptyFunction} />;
+    const node = renderTextarea(stub, container);
+
+    expect(node.value).toBe('giraffe');
+
+    const test = () =>
+      ReactDOM.render(
+        <textarea value={new TemporalLike()} onChange={emptyFunction} />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
   it('should take updates to `defaultValue` for uncontrolled textarea', () => {
     const container = document.createElement('div');
 
diff --git a/packages/react-dom/src/__tests__/ReactIdentity-test.js b/packages/react-dom/src/__tests__/ReactIdentity-test.js
index cce0c227b6392..97283d8c392db 100644
--- a/packages/react-dom/src/__tests__/ReactIdentity-test.js
+++ b/packages/react-dom/src/__tests__/ReactIdentity-test.js
@@ -262,4 +262,33 @@ describe('ReactIdentity', () => {
       ReactTestUtils.renderIntoDocument(component);
     }).not.toThrow();
   });
+
+  it('should throw if key is a Temporal-like object', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+
+    const el = document.createElement('div');
+    const test = () =>
+      ReactDOM.render(
+        <div>
+          <span key={new TemporalLike()} />
+        </div>,
+        el,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'The provided key is an unsupported type TemporalLike.' +
+        ' This value must be coerced to a string before before using it here.',
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index 467cbf59c2e06..2e99344289a7a 100644
--- 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(String(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(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
index 2dcb1ace8ab9f..30fed05aed609 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -20,6 +20,7 @@ import {
   disableJavaScriptURLs,
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 import {isOpaqueHydratingObject} from './ReactDOMHostConfig';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
@@ -40,10 +41,18 @@ export function getValueForProperty(
       const {propertyName} = propertyInfo;
       return (node: any)[propertyName];
     } else {
+      // This check protects multiple uses of `expected`, which is why the
+      // react-internal/safe-string-coercion rule is disabled in several spots
+      // below.
+      if (__DEV__) {
+        checkAttributeStringCoercion(expected, name);
+      }
+
       if (!disableJavaScriptURLs && propertyInfo.sanitizeURL) {
         // 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.
+        // eslint-disable-next-line react-internal/safe-string-coercion
         sanitizeURL('' + (expected: any));
       }
 
@@ -60,6 +69,7 @@ export function getValueForProperty(
           if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
             return value;
           }
+          // eslint-disable-next-line react-internal/safe-string-coercion
           if (value === '' + (expected: any)) {
             return expected;
           }
@@ -85,6 +95,7 @@ export function getValueForProperty(
 
       if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
         return stringValue === null ? expected : stringValue;
+        // eslint-disable-next-line react-internal/safe-string-coercion
       } else if (stringValue === '' + (expected: any)) {
         return expected;
       } else {
@@ -119,6 +130,9 @@ export function getValueForAttribute(
       return expected === undefined ? undefined : null;
     }
     const value = node.getAttribute(name);
+    if (__DEV__) {
+      checkAttributeStringCoercion(expected, name);
+    }
     if (value === '' + (expected: any)) {
       return expected;
     }
@@ -153,6 +167,9 @@ export function setValueForProperty(
       if (value === null) {
         node.removeAttribute(attributeName);
       } else {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, name);
+        }
         node.setAttribute(
           attributeName,
           enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
@@ -191,6 +208,9 @@ export function setValueForProperty(
       if (enableTrustedTypesIntegration) {
         attributeValue = (value: any);
       } else {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
         attributeValue = '' + (value: any);
       }
       if (propertyInfo.sanitizeURL) {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 7820978957107..2d347639eba45 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -14,6 +14,7 @@ import {
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   getValueForAttribute,
@@ -139,6 +140,9 @@ if (__DEV__) {
   const NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
 
   normalizeMarkupForTextOrAttribute = function(markup: mixed): string {
+    if (__DEV__) {
+      checkHtmlStringCoercion(markup);
+    }
     const markupString =
       typeof markup === 'string' ? markup : '' + (markup: any);
     return markupString
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index c1afd277e3e93..4fabc1fb9ada9 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -18,6 +18,7 @@ import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes
 import {updateValueIfChanged} from './inputValueTracking';
 import getActiveElement from './getActiveElement';
 import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
 
@@ -365,6 +366,9 @@ function updateNamedCousins(rootNode, props) {
     // the input might not even be in a form. It might not even be in the
     // document. Let's just use the local `querySelectorAll` to ensure we don't
     // miss anything.
+    if (__DEV__) {
+      checkAttributeStringCoercion(name, 'name');
+    }
     const group = queryRoot.querySelectorAll(
       'input[name=' + JSON.stringify('' + name) + '][type="radio"]',
     );
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 41826cd404e05..508e8a9029957 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+
 export opaque type ToStringValue =
   | boolean
   | number
@@ -19,6 +21,8 @@ export opaque type ToStringValue =
 // around this limitation, we use an opaque type that can only be obtained by
 // passing the value through getToStringValue first.
 export function toString(value: ToStringValue): string {
+  // The coercion safety check is performed in getToStringValue().
+  // eslint-disable-next-line react-internal/safe-string-coercion
   return '' + (value: any);
 }
 
@@ -26,10 +30,14 @@ export function getToStringValue(value: mixed): ToStringValue {
   switch (typeof value) {
     case 'boolean':
     case 'number':
-    case 'object':
     case 'string':
     case 'undefined':
       return value;
+    case 'object':
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
+      return value;
     default:
       // function, symbol are assigned as empty strings
       return '';
diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
index 54c850662ab2b..499c9aa97ecc6 100644
--- a/packages/react-dom/src/client/inputValueTracking.js
+++ b/packages/react-dom/src/client/inputValueTracking.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+
 type ValueTracker = {|
   getValue(): string,
   setValue(value: string): void,
@@ -55,6 +57,9 @@ function trackValueOnNode(node: any): ?ValueTracker {
     valueField,
   );
 
+  if (__DEV__) {
+    checkFormFieldValueStringCoercion(node[valueField]);
+  }
   let currentValue = '' + node[valueField];
 
   // if someone has already defined a value or Safari, then bail
@@ -76,6 +81,9 @@ function trackValueOnNode(node: any): ?ValueTracker {
       return get.call(this);
     },
     set: function(value) {
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
       currentValue = '' + value;
       set.call(this, value);
     },
@@ -93,6 +101,9 @@ function trackValueOnNode(node: any): ?ValueTracker {
       return currentValue;
     },
     setValue(value) {
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
       currentValue = '' + value;
     },
     stopTracking() {
diff --git a/packages/react-dom/src/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js
index 014e635531926..dda7ceab721fb 100644
--- a/packages/react-dom/src/server/DOMMarkupOperations.js
+++ b/packages/react-dom/src/server/DOMMarkupOperations.js
@@ -16,6 +16,7 @@ import {
   shouldRemoveAttribute,
 } from '../shared/DOMProperty';
 import sanitizeURL from '../shared/sanitizeURL';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 import quoteAttributeValueForBrowser from './quoteAttributeValueForBrowser';
 
 /**
@@ -44,6 +45,9 @@ export function createMarkupForProperty(name: string, value: mixed): string {
       return attributeName + '=""';
     } else {
       if (propertyInfo.sanitizeURL) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
         value = '' + (value: any);
         sanitizeURL(value);
       }
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 78e909cff610c..954cc1ef689f5 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -9,6 +9,12 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import {
+  checkHtmlStringCoercion,
+  checkCSSPropertyStringCoercion,
+  checkAttributeStringCoercion,
+} from 'shared/CheckStringCoercion';
+
 import {Children} from 'react';
 
 import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
@@ -272,6 +278,9 @@ function pushStyle(
     const isCustomProperty = styleName.indexOf('--') === 0;
     if (isCustomProperty) {
       nameChunk = stringToChunk(escapeTextForBrowser(styleName));
+      if (__DEV__) {
+        checkCSSPropertyStringCoercion(styleValue, styleName);
+      }
       valueChunk = stringToChunk(
         escapeTextForBrowser(('' + styleValue).trim()),
       );
@@ -291,6 +300,9 @@ function pushStyle(
           valueChunk = stringToChunk('' + styleValue);
         }
       } else {
+        if (__DEV__) {
+          checkCSSPropertyStringCoercion(styleValue, styleName);
+        }
         valueChunk = stringToChunk(
           escapeTextForBrowser(('' + styleValue).trim()),
         );
@@ -439,6 +451,9 @@ function pushAttribute(
         break;
       default:
         if (propertyInfo.sanitizeURL) {
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, attributeName);
+          }
           value = '' + (value: any);
           sanitizeURL(value);
         }
@@ -496,6 +511,9 @@ function pushInnerHTML(
     );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
+      if (__DEV__) {
+        checkHtmlStringCoercion(html);
+      }
       target.push(stringToChunk('' + html));
     }
   }
@@ -679,6 +697,9 @@ function pushStartOption(
   if (selectedValue !== null) {
     let stringValue;
     if (value !== null) {
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, 'value');
+      }
       stringValue = '' + value;
     } else {
       if (__DEV__) {
@@ -697,6 +718,9 @@ function pushStartOption(
     if (isArray(selectedValue)) {
       // multiple
       for (let i = 0; i < selectedValue.length; i++) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(selectedValue[i], 'value');
+        }
         const v = '' + selectedValue[i];
         if (v === stringValue) {
           target.push(selectedMarkerAttribute);
@@ -895,8 +919,16 @@ function pushStartTextArea(
         children.length <= 1,
         '<textarea> can only have at most one child.',
       );
+      // TODO: remove the coercion and the DEV check below because it will
+      // always be overwritten by the coercion several lines below it. #22309
+      if (__DEV__) {
+        checkHtmlStringCoercion(children[0]);
+      }
       value = '' + children[0];
     }
+    if (__DEV__) {
+      checkHtmlStringCoercion(children);
+    }
     value = '' + children;
   }
 
@@ -1142,6 +1174,9 @@ function pushStartPreformattedElement(
       if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
         target.push(leadingNewline, stringToChunk(html));
       } else {
+        if (__DEV__) {
+          checkHtmlStringCoercion(html);
+        }
         target.push(stringToChunk('' + html));
       }
     }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index caf1ee2f6fc29..56231cf5a0187 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -25,6 +25,10 @@ import {
   enableSuspenseServerRenderer,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
+import {
+  checkPropStringCoercion,
+  checkFormFieldValueStringCoercion,
+} from 'shared/CheckStringCoercion';
 
 import {
   REACT_DEBUG_TRACING_MODE_TYPE,
@@ -1472,6 +1476,9 @@ class ReactDOMServerRenderer {
             textareaChildren = textareaChildren[0];
           }
 
+          if (__DEV__) {
+            checkPropStringCoercion(textareaChildren, 'children');
+          }
           defaultValue = '' + textareaChildren;
         }
         if (defaultValue == null) {
@@ -1480,6 +1487,9 @@ class ReactDOMServerRenderer {
         initialValue = defaultValue;
       }
 
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(initialValue);
+      }
       props = Object.assign({}, props, {
         value: undefined,
         children: '' + initialValue,
@@ -1535,6 +1545,9 @@ class ReactDOMServerRenderer {
       if (selectValue != null) {
         let value;
         if (props.value != null) {
+          if (__DEV__) {
+            checkFormFieldValueStringCoercion(props.value);
+          }
           value = props.value + '';
         } else {
           if (__DEV__) {
@@ -1554,12 +1567,18 @@ class ReactDOMServerRenderer {
         if (isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
+            if (__DEV__) {
+              checkFormFieldValueStringCoercion(selectValue[j]);
+            }
             if ('' + selectValue[j] === value) {
               selected = true;
               break;
             }
           }
         } else {
+          if (__DEV__) {
+            checkFormFieldValueStringCoercion(selectValue);
+          }
           selected = '' + selectValue === value;
         }
 
diff --git a/packages/react-dom/src/server/escapeTextForBrowser.js b/packages/react-dom/src/server/escapeTextForBrowser.js
index 2a5a91aafde3c..4583cef684902 100644
--- a/packages/react-dom/src/server/escapeTextForBrowser.js
+++ b/packages/react-dom/src/server/escapeTextForBrowser.js
@@ -36,6 +36,8 @@
  * @private
  */
 
+import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+
 const matchHtmlRegExp = /["'&<>]/;
 
 /**
@@ -47,6 +49,9 @@ const matchHtmlRegExp = /["'&<>]/;
  */
 
 function escapeHtml(string) {
+  if (__DEV__) {
+    checkHtmlStringCoercion(string);
+  }
   const str = '' + string;
   const match = matchHtmlRegExp.exec(str);
 
diff --git a/packages/react-dom/src/shared/dangerousStyleValue.js b/packages/react-dom/src/shared/dangerousStyleValue.js
index 53d32e9126d66..c4a1a506eb74c 100644
--- a/packages/react-dom/src/shared/dangerousStyleValue.js
+++ b/packages/react-dom/src/shared/dangerousStyleValue.js
@@ -6,6 +6,7 @@
  */
 
 import {isUnitlessNumber} from './CSSProperty';
+import {checkCSSPropertyStringCoercion} from 'shared/CheckStringCoercion';
 
 /**
  * Convert a value into the proper css writable value. The style name `name`
@@ -41,6 +42,9 @@ function dangerousStyleValue(name, value, isCustomProperty) {
     return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
   }
 
+  if (__DEV__) {
+    checkCSSPropertyStringCoercion(value, name);
+  }
   return ('' + value).trim();
 }
 
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index bc913d160b68c..da0d16ade6a09 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -95,7 +95,7 @@ function validateClassInstance(inst, methodName) {
     return;
   }
   let received;
-  const stringified = '' + inst;
+  const stringified = String(inst);
   if (isArray(inst)) {
     received = 'an array';
   } else if (inst && inst.nodeType === ELEMENT_NODE && inst.tagName) {
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9e2c1ba7f876c..2f0d70a6029a1 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -22,6 +22,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import isArray from 'shared/isArray';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 import {
   DefaultEventPriority,
   IdleEventPriority,
@@ -215,6 +216,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     keepChildren: boolean,
     recyclableInstance: null | Instance,
   ): Instance {
+    if (__DEV__) {
+      checkPropStringCoercion(newProps.children, 'children');
+    }
     const clone = {
       id: instance.id,
       type: type,
@@ -293,13 +297,21 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (type === 'errorInCompletePhase') {
         throw new Error('Error in host config.');
       }
+      if (__DEV__) {
+        // The `if` statement here prevents auto-disabling of the safe coercion
+        // ESLint rule, so we must manually disable it below.
+        if (shouldSetTextContent(type, props)) {
+          checkPropStringCoercion(props.children, 'children');
+        }
+      }
       const inst = {
         id: instanceCounter++,
         type: type,
         children: [],
         parent: -1,
         text: shouldSetTextContent(type, props)
-          ? computeText((props.children: any) + '', hostContext)
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            computeText((props.children: any) + '', hostContext)
           : null,
         prop: props.prop,
         hidden: !!props.hidden,
@@ -481,6 +493,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           instance.prop = newProps.prop;
           instance.hidden = !!newProps.hidden;
           if (shouldSetTextContent(type, newProps)) {
+            if (__DEV__) {
+              checkPropStringCoercion(newProps.children, 'children');
+            }
             instance.text = computeText(
               (newProps.children: any) + '',
               instance.context,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index e3f41115f53f9..91dcff903a63a 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -28,6 +28,7 @@ import {
   warnAboutStringRefs,
   enableLazyElements,
 } from 'shared/ReactFeatureFlags';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   createWorkInProgress,
@@ -163,6 +164,9 @@ function coerceRef(
           'bug in React. Please file an issue.',
         mixedRef,
       );
+      if (__DEV__) {
+        checkPropStringCoercion(mixedRef, 'ref');
+      }
       const stringRef = '' + mixedRef;
       // Check if previous string ref matches new string ref
       if (
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index f1e39112b589b..9fafdf05f67a6 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -28,6 +28,7 @@ import {
   warnAboutStringRefs,
   enableLazyElements,
 } from 'shared/ReactFeatureFlags';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   createWorkInProgress,
@@ -163,6 +164,9 @@ function coerceRef(
           'bug in React. Please file an issue.',
         mixedRef,
       );
+      if (__DEV__) {
+        checkPropStringCoercion(mixedRef, 'ref');
+      }
       const stringRef = '' + mixedRef;
       // Check if previous string ref matches new string ref
       if (
diff --git a/packages/react-reconciler/src/ReactPortal.js b/packages/react-reconciler/src/ReactPortal.js
index 43f590c19d4a6..a310780516320 100644
--- a/packages/react-reconciler/src/ReactPortal.js
+++ b/packages/react-reconciler/src/ReactPortal.js
@@ -8,6 +8,7 @@
  */
 
 import {REACT_PORTAL_TYPE} from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ReactNodeList, ReactPortal} from 'shared/ReactTypes';
 
@@ -18,6 +19,9 @@ export function createPortal(
   implementation: any,
   key: ?string = null,
 ): ReactPortal {
+  if (__DEV__) {
+    checkKeyStringCoercion(key);
+  }
   return {
     // This tag allow us to uniquely identify this as a React Portal
     $$typeof: REACT_PORTAL_TYPE,
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 77b77869c782c..31321eb07a520 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -875,7 +875,7 @@ describe('ReactCache', () => {
     function Unrelated() {
       const [count, _updateUnrelated] = useState(0);
       updateUnrelated = _updateUnrelated;
-      return <Text text={count + ''} />;
+      return <Text text={String(count)} />;
     }
 
     const root = ReactNoop.createRoot();
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 55b9abdcd7463..b687212f2b32c 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2754,7 +2754,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create insertion [current: ${committedText}]`,
           );
-          committedText = props.count + '';
+          committedText = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy insertion [current: ${committedText}]`,
@@ -2817,7 +2817,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create insertion [current: ${committedText}]`,
           );
-          committedText = props.count + '';
+          committedText = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy insertion [current: ${committedText}]`,
@@ -2828,7 +2828,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create layout [current: ${committedText}]`,
           );
-          committedText = props.count + '';
+          committedText = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy layout [current: ${committedText}]`,
@@ -2886,7 +2886,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
           );
-          committedA = props.count + '';
+          committedA = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
@@ -2897,7 +2897,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
           );
-          committedA = props.count + '';
+          committedA = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
@@ -2934,7 +2934,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
           );
-          committedB = props.count + '';
+          committedB = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
@@ -2945,7 +2945,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
           );
-          committedB = props.count + '';
+          committedB = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
@@ -3140,7 +3140,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         useLayoutEffect(() => {
           // Normally this would go in a mutation effect, but this test
           // intentionally omits a mutation effect.
-          committedText = props.count + '';
+          committedText = String(props.count);
 
           Scheduler.unstable_yieldValue(
             `Mount layout [current: ${committedText}]`,
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index 864723e927b8f..20496019984f2 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -1110,7 +1110,7 @@ describe('ReactIncremental', () => {
       }
       render() {
         Scheduler.unstable_yieldValue('Bar:' + this.props.x);
-        return <span prop={'' + (this.props.x === this.state.y)} />;
+        return <span prop={String(this.props.x === this.state.y)} />;
       }
     }
 
@@ -1159,7 +1159,7 @@ describe('ReactIncremental', () => {
         Scheduler.unstable_yieldValue(
           'Bar:' + this.props.x + '-' + this.props.step,
         );
-        return <span prop={'' + (this.props.x === this.state.y)} />;
+        return <span prop={String(this.props.x === this.state.y)} />;
       }
     }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index 639daeb1a98d1..0bbab43d33e0d 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -223,7 +223,7 @@ describe('memo', () => {
         class CounterInner extends React.Component {
           static defaultProps = {suffix: '!'};
           render() {
-            return <Text text={this.props.count + '' + this.props.suffix} />;
+            return <Text text={this.props.count + String(this.props.suffix)} />;
           }
         }
         const Counter = memo(CounterInner);
diff --git a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
index 46ccfea5c2061..12a27fb3dd678 100644
--- a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
@@ -27,7 +27,7 @@ describe('ReactPersistent', () => {
   function createPortal(children, containerInfo, implementation, key) {
     return {
       $$typeof: Symbol.for('react.portal'),
-      key: key == null ? null : '' + key,
+      key: key == null ? null : String(key),
       children,
       containerInfo,
       implementation,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 5429d3a3b9e60..b7a43254fc447 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -296,7 +296,7 @@ function describeValueForErrorMessage(value: ReactModel): string {
     case 'function':
       return 'function';
     default:
-      // eslint-disable-next-line
+      // eslint-disable-next-line react-internal/safe-string-coercion
       return String(value);
   }
 }
@@ -615,8 +615,10 @@ function emitErrorChunk(request: Request, id: number, error: mixed): void {
   let stack = '';
   try {
     if (error instanceof Error) {
-      message = '' + error.message;
-      stack = '' + error.stack;
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      message = String(error.message);
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      stack = String(error.stack);
     } else {
       message = 'Error: ' + (error: any);
     }
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 39c288014884d..b6d047e0e4810 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -44,6 +44,7 @@ import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {getPublicInstance} from './ReactTestHostConfig';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
@@ -251,6 +252,9 @@ function getChildren(parent: Fiber) {
     if (validWrapperTypes.has(node.tag)) {
       children.push(wrapFiber(node));
     } else if (node.tag === HostText) {
+      if (__DEV__) {
+        checkPropStringCoercion(node.memoizedProps, 'memoizedProps');
+      }
       children.push('' + node.memoizedProps);
     } else {
       descend = true;
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 9acdc068e8ea3..dab75998bb8e0 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -16,6 +16,7 @@ import {
   REACT_ELEMENT_TYPE,
   REACT_PORTAL_TYPE,
 } from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 import {isValidElement, cloneAndReplaceKey} from './ReactElement';
 
@@ -65,6 +66,9 @@ function getElementKey(element: any, index: number): string {
   // that we don't block potential future ES APIs.
   if (typeof element === 'object' && element !== null && element.key != null) {
     // Explicit key
+    if (__DEV__) {
+      checkKeyStringCoercion(element.key);
+    }
     return escape('' + element.key);
   }
   // Implicit key determined by the index in the set
@@ -119,6 +123,14 @@ function mapIntoArray(
       mapIntoArray(mappedChild, array, escapedChildKey, '', c => c);
     } else if (mappedChild != null) {
       if (isValidElement(mappedChild)) {
+        if (__DEV__) {
+          // The `if` statement here prevents auto-disabling of the safe
+          // coercion ESLint rule, so we must manually disable it below.
+          // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
+          if (mappedChild.key && (!child || child.key !== mappedChild.key)) {
+            checkKeyStringCoercion(mappedChild.key);
+          }
+        }
         mappedChild = cloneAndReplaceKey(
           mappedChild,
           // Keep both the (mapped) and old keys if they differ, just as
@@ -127,6 +139,7 @@ function mapIntoArray(
             // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
             (mappedChild.key && (!child || child.key !== mappedChild.key)
               ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
+                // eslint-disable-next-line react-internal/safe-string-coercion
                 escapeUserProvidedKey('' + mappedChild.key) + '/'
               : '') +
             childKey,
@@ -190,7 +203,8 @@ function mapIntoArray(
         );
       }
     } else if (type === 'object') {
-      const childrenString = '' + (children: any);
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      const childrenString = String((children: any));
       invariant(
         false,
         'Objects are not valid as a React child (found: %s). ' +
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 75017cba37aef..25179e2b2c4f1 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -9,6 +9,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 
@@ -222,10 +223,16 @@ export function jsx(type, config, maybeKey) {
   // <div {...props} key="Hi" />, because we aren't currently able to tell if
   // key is explicitly declared to be undefined or not.
   if (maybeKey !== undefined) {
+    if (__DEV__) {
+      checkKeyStringCoercion(maybeKey);
+    }
     key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
+    if (__DEV__) {
+      checkKeyStringCoercion(config.key);
+    }
     key = '' + config.key;
   }
 
@@ -286,10 +293,16 @@ export function jsxDEV(type, config, maybeKey, source, self) {
   // <div {...props} key="Hi" />, because we aren't currently able to tell if
   // key is explicitly declared to be undefined or not.
   if (maybeKey !== undefined) {
+    if (__DEV__) {
+      checkKeyStringCoercion(maybeKey);
+    }
     key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
+    if (__DEV__) {
+      checkKeyStringCoercion(config.key);
+    }
     key = '' + config.key;
   }
 
@@ -366,6 +379,9 @@ export function createElement(type, config, children) {
       }
     }
     if (hasValidKey(config)) {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
       key = '' + config.key;
     }
 
@@ -499,6 +515,9 @@ export function cloneElement(element, config, children) {
       owner = ReactCurrentOwner.current;
     }
     if (hasValidKey(config)) {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
       key = '' + config.key;
     }
 
diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
index e87a969712e1e..af7085f7e2476 100644
--- a/packages/react/src/jsx/ReactJSXElement.js
+++ b/packages/react/src/jsx/ReactJSXElement.js
@@ -9,6 +9,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -222,10 +223,16 @@ export function jsx(type, config, maybeKey) {
   // <div {...props} key="Hi" />, because we aren't currently able to tell if
   // key is explicitly declared to be undefined or not.
   if (maybeKey !== undefined) {
+    if (__DEV__) {
+      checkKeyStringCoercion(maybeKey);
+    }
     key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
+    if (__DEV__) {
+      checkKeyStringCoercion(config.key);
+    }
     key = '' + config.key;
   }
 
@@ -287,10 +294,16 @@ export function jsxDEV(type, config, maybeKey, source, self) {
     // <div {...props} key="Hi" />, because we aren't currently able to tell if
     // key is explicitly declared to be undefined or not.
     if (maybeKey !== undefined) {
+      if (__DEV__) {
+        checkKeyStringCoercion(maybeKey);
+      }
       key = '' + maybeKey;
     }
 
     if (hasValidKey(config)) {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
       key = '' + config.key;
     }
 
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
new file mode 100644
index 0000000000000..9db9e7145ad4f
--- /dev/null
+++ b/packages/shared/CheckStringCoercion.js
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
+
+/*
+ * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+
+// $FlowFixMe only called in DEV, so void return is not possible.
+function typeName(value: mixed): string {
+  if (__DEV__) {
+    // toStringTag is needed for namespaced types like Temporal.Instant
+    const hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+    const type =
+      (hasToStringTag && (value: any)[Symbol.toStringTag]) ||
+      (value: any).constructor.name ||
+      'Object';
+    return type;
+  }
+}
+
+// $FlowFixMe only called in DEV, so void return is not possible.
+function willCoercionThrow(value: mixed): boolean {
+  if (__DEV__) {
+    if (
+      value !== null &&
+      typeof value === 'object' &&
+      value.$$typeof === REACT_OPAQUE_ID_TYPE
+    ) {
+      // OpaqueID type is expected to throw, so React will handle it. Not sure if
+      // it's expected that string coercion will throw, but we'll assume it's OK.
+      // See https://github.com/facebook/react/issues/20127.
+      return;
+    }
+    try {
+      testStringCoercion(value);
+      return false;
+    } catch (e) {
+      return true;
+    }
+  }
+}
+
+function testStringCoercion(value: mixed) {
+  // If you ended up here by following an exception call stack, here's what's
+  // happened: you supplied an object or symbol value to React (as a prop, key,
+  // DOM attribute, CSS property, string ref, etc.) and when React tried to
+  // coerce it to a string using `'' + value`, an exception was thrown.
+  //
+  // The most common types that will cause this exception are `Symbol` instances
+  // and Temporal objects like `Temporal.Instant`. But any object that has a
+  // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+  // exception. (Library authors do this to prevent users from using built-in
+  // numeric operators like `+` or comparison operators like `>=` because custom
+  // methods are needed to perform accurate arithmetic or comparison.)
+  //
+  // To fix the problem, coerce this object or symbol value to a string before
+  // passing it to React. The most reliable way is usually `String(value)`.
+  //
+  // To find which value is throwing, check the browser or debugger console.
+  // Before this exception was thrown, there should be `console.error` output
+  // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+  // problem and how that type was used: key, atrribute, input value prop, etc.
+  // In most cases, this console output also shows the component and its
+  // ancestor components where the exception happened.
+  //
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  return '' + (value: any);
+}
+
+export function checkAttributeStringCoercion(
+  value: mixed,
+  attributeName: string,
+) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` attribute is an unsupported type %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        attributeName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkKeyStringCoercion(value: mixed) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided key is an unsupported type %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkPropStringCoercion(value: mixed, propName: string) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` prop is an unsupported type %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkCSSPropertyStringCoercion(value: mixed, propName: string) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` CSS property is an unsupported type %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkHtmlStringCoercion(value: mixed) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided HTML markup uses a value of unsupported type %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkFormFieldValueStringCoercion(value: mixed) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js
index 20adcc9f3539e..fddec07ec1286 100644
--- a/packages/shared/consoleWithStackDev.js
+++ b/packages/shared/consoleWithStackDev.js
@@ -47,7 +47,8 @@ function printWarning(level, format, args) {
       args = args.concat([stack]);
     }
 
-    const argsWithFormat = args.map(item => '' + item);
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const argsWithFormat = args.map(item => String(item));
     // Careful: RN currently depends on this prefix
     argsWithFormat.unshift('Warning: ' + format);
     // We intentionally don't use spread (or .apply) directly because it
diff --git a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
index 67cee01439a2b..f52a79d7f08fb 100644
--- a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
@@ -14,7 +14,7 @@ const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
-  valid: ['!!obj', "'' + obj", '+string'],
+  valid: ['!!obj', '+string'],
   invalid: [
     {
       code: 'Boolean(obj)',
@@ -26,13 +26,11 @@ ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
       ],
     },
     {
-      code: 'String(obj)',
+      code: 'new String(obj)',
       errors: [
         {
           message:
-            'Do not use the String constructor. ' +
-            'To cast a value to a string, concat it with the empty string ' +
-            "(unless it's a symbol, which has different semantics): '' + value",
+            "Do not use `new String()`. Use String() without new (or '' + value for perf-sensitive code).",
         },
       ],
     },
diff --git a/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
new file mode 100644
index 0000000000000..32c58a4351719
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../safe-string-coercion');
+const {RuleTester} = require('eslint');
+const ruleTester = new RuleTester();
+
+const missingDevCheckMessage =
+  'Missing DEV check before this string coercion.' +
+  ' Check should be in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+const prevStatementNotDevCheckMessage =
+  'The statement before this coercion must be a DEV check in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+const message =
+  "Using `'' + value` or `value + ''` is fast to coerce strings, but may throw." +
+  ' For prod code, add a DEV check from shared/CheckStringCoercion immediately' +
+  ' before this coercion.' +
+  ' For non-prod code and prod error handling, use `String(value)` instead.';
+
+ruleTester.run('eslint-rules/safe-string-coercion', rule, {
+  valid: [
+    {
+      code: 'String(obj)',
+      options: [{isProductionUserAppCode: false}],
+    },
+    'String(obj)',
+    "'a' + obj",
+    `
+      function getValueForAttribute(
+        node,
+        name,
+        expected
+      ) {
+        if (__DEV__) {
+          var value = node.getAttribute(name);
+          if (__DEV__) {
+            checkAttributeStringCoercion(expected, name);
+          }
+          if (value === '' + expected) {
+            return expected;
+          }
+          return value;
+        }
+      }
+    `,
+    `
+      if (__DEV__) { checkFormFieldValueStringCoercion (obj) } 
+      '' + obj;
+    `,
+    `
+      function f(a, index) {
+        if (typeof a === 'object' && a !== null && a.key != null) {
+          if (__DEV__) {
+            checkKeyStringCoercion(a.key);
+          }
+          return f('' + a.key);
+        }
+        return a;
+      }
+    `,
+    "'' + i++",
+    "'' + +i",
+    "'' + +i",
+    "+i + ''",
+    "if (typeof obj === 'string') { '' + obj }",
+    "if (typeof obj === 'string' || typeof obj === 'number') { '' + obj }",
+    "if (typeof obj === 'string' && somethingElse) { '' + obj }",
+    "if (typeof obj === 'number' && somethingElse) { '' + obj }",
+    "if (typeof obj === 'bigint' && somethingElse) { '' + obj }",
+    "if (typeof obj === 'undefined' && somethingElse) { '' + obj }",
+    "if (typeof nextProp === 'number') { setTextContent(domElement, '' + nextProp); }",
+    // These twe below are sneaky. The inner `if` is unsafe, but the outer `if`
+    // ensures that the unsafe code will never be run. It's bad code, but
+    // doesn't violate this rule.
+    "if (typeof obj === 'string') { if (typeof obj === 'string' && obj.length) {} else {'' + obj} }",
+    "if (typeof obj === 'string') if (typeof obj === 'string' && obj.length) {} else {'' + obj}",
+  ],
+  invalid: [
+    {
+      code: "'' + obj",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: "obj + ''",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: 'String(obj)',
+      options: [{isProductionUserAppCode: true}],
+      errors: [
+        {
+          message:
+            "For perf-sensitive coercion, avoid `String(value)`. Instead, use `'' + value`." +
+            ' Precede it with a DEV check from shared/CheckStringCoercion' +
+            ' unless Symbol and Temporal.* values are impossible.' +
+            ' For non-prod code and prod error handling, use `String(value)` and disable this rule.',
+        },
+      ],
+    },
+    {
+      code: "if (typeof obj === 'object') { '' + obj }",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code:
+        "if (typeof obj === 'string') { } else if (typeof obj === 'object') {'' + obj}",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: "if (typeof obj === 'string' && obj.length) {} else {'' + obj}",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__D__) { checkFormFieldValueStringCoercion (obj) } 
+          '' + obj;
+        `,
+      errors: [
+        {
+          message: prevStatementNotDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { checkFormFieldValueStringCoercion (obj) } 
+          '' + notobjj;
+        `,
+      errors: [
+        {
+          message:
+            'Value passed to the check function before this coercion must match the value being coerced.' +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { checkFormFieldValueStringCoercion (obj) }
+          // must be right before the check call
+          someOtherCode(); 
+          '' + objj;
+        `,
+      errors: [
+        {
+          message: prevStatementNotDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { chexxxxBadNameCoercion (obj) }
+          '' + objj;
+        `,
+      errors: [
+        {
+          message:
+            'Missing or invalid check function call before this coercion.' +
+            ' Expected: call of a function like checkXXXStringCoercion. ' +
+            prevStatementNotDevCheckMessage +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) {  }
+          '' + objj;
+        `,
+      errors: [
+        {
+          message: prevStatementNotDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { if (x) {} }
+          '' + objj;
+        `,
+      errors: [
+        {
+          message:
+            'The DEV block before this coercion must only contain an expression. ' +
+            prevStatementNotDevCheckMessage +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+        if (a) {
+          if (__DEV__) {
+            // can't have additional code before the check call
+            if (b) {
+              checkKeyStringCoercion(obj);
+            }
+          }
+          g = f( c, d + (b ? '' + obj : '') + e);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The DEV block before this coercion must only contain an expression. ' +
+            prevStatementNotDevCheckMessage +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+          checkAttributeStringCoercion(expected, name);
+        }
+        // DEV check should be inside the if block
+        if (a && b) {
+          f('' + expected);
+        }
+      `,
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 0a08b0d4cfcdf..0e86334d26331 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -9,5 +9,6 @@ module.exports = {
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
     'no-cross-fork-types': require('./no-cross-fork-types'),
+    'safe-string-coercion': require('./safe-string-coercion'),
   },
 };
diff --git a/scripts/eslint-rules/no-primitive-constructors.js b/scripts/eslint-rules/no-primitive-constructors.js
index bbba8ccd54fd6..2cf46f4a42387 100644
--- a/scripts/eslint-rules/no-primitive-constructors.js
+++ b/scripts/eslint-rules/no-primitive-constructors.js
@@ -29,13 +29,12 @@ module.exports = {
           );
           break;
         case 'String':
-          report(
-            node,
-            name,
-            'To cast a value to a string, concat it with the empty string ' +
-              "(unless it's a symbol, which has different semantics): " +
-              "'' + value"
-          );
+          if (node.type === 'NewExpression') {
+            context.report(
+              node,
+              "Do not use `new String()`. Use String() without new (or '' + value for perf-sensitive code)."
+            );
+          }
           break;
         case 'Number':
           report(
diff --git a/scripts/eslint-rules/safe-string-coercion.js b/scripts/eslint-rules/safe-string-coercion.js
new file mode 100644
index 0000000000000..3a6c8ebb142b6
--- /dev/null
+++ b/scripts/eslint-rules/safe-string-coercion.js
@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+function isEmptyLiteral(node) {
+  return (
+    node.type === 'Literal' &&
+    typeof node.value === 'string' &&
+    node.value === ''
+  );
+}
+
+// Symbols and Temporal.* objects will throw when using `'' + value`, but that
+// pattern can be faster than `String(value)` because JS engines can optimize
+// `+` better in some cases. Therefore, in perf-sensitive production codepaths
+// we require using `'' + value` for string coercion. The only exception is prod
+// error handling code, because it's bad to crash while assembling an error
+// message or call stack! Also, error-handling code isn't usually perf-critical.
+//
+// Non-production codepaths (tests, devtools extension, build tools, etc.)
+// should use `String(value)` because it will never crash and the (small) perf
+// difference doesn't matter enough for non-prod use cases.
+//
+// This rule assists enforcing these guidelines:
+// * `'' + value` is flagged with a message to remind developers to add a DEV
+//   check from shared/CheckStringCoercion.js to make sure that the user gets a
+//   clear error message in DEV is the coercion will throw. These checks are not
+//   needed if throwing is not possible, e.g. if the value is already known to
+//   be a string or number.
+// * `String(value)` is flagged only if the `isProductionUserAppCode` option
+//   is set. Set this option for prod code files, and don't set it for non-prod
+//   files.
+
+const ignoreKeys = [
+  'range',
+  'raw',
+  'parent',
+  'loc',
+  'start',
+  'end',
+  '_babelType',
+  'leadingComments',
+  'trailingComments',
+];
+function astReplacer(key, value) {
+  return ignoreKeys.includes(key) ? undefined : value;
+}
+
+/**
+ * Simplistic comparison between AST node. Only the following patterns are
+ * supported because that's almost all (all?) usage in React:
+ * - Identifiers, e.g. `foo`
+ * - Member access, e.g. `foo.bar`
+ * - Array access with numeric literal, e.g. `foo[0]`
+ */
+function isEquivalentCode(node1, node2) {
+  return (
+    JSON.stringify(node1, astReplacer) === JSON.stringify(node2, astReplacer)
+  );
+}
+
+function isDescendant(node, maybeParentNode) {
+  let parent = node.parent;
+  while (parent) {
+    if (!parent) {
+      return false;
+    }
+    if (parent === maybeParentNode) {
+      return true;
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+
+function isSafeTypeofExpression(originalValueNode, node) {
+  if (node.type === 'BinaryExpression') {
+    // Example: typeof foo === 'string'
+    if (node.operator !== '===') {
+      return false;
+    }
+    const {left, right} = node;
+
+    // left must be `typeof original`
+    if (left.type !== 'UnaryExpression' || left.operator !== 'typeof') {
+      return false;
+    }
+    if (!isEquivalentCode(left.argument, originalValueNode)) {
+      return false;
+    }
+    // right must be a literal value of a safe type
+    const safeTypes = ['string', 'number', 'boolean', 'undefined', 'bigint'];
+    if (right.type !== 'Literal' || !safeTypes.includes(right.value)) {
+      return false;
+    }
+    return true;
+  } else if (node.type === 'LogicalExpression') {
+    // Examples:
+    // * typeof foo === 'string' && typeof foo === 'number
+    // * typeof foo === 'string' && someOtherTest
+    if (node.operator === '&&') {
+      return (
+        isSafeTypeofExpression(originalValueNode, node.left) ||
+        isSafeTypeofExpression(originalValueNode, node.right)
+      );
+    } else if (node.operator === '||') {
+      return (
+        isSafeTypeofExpression(originalValueNode, node.left) &&
+        isSafeTypeofExpression(originalValueNode, node.right)
+      );
+    }
+  }
+  return false;
+}
+
+/** 
+  Returns true if the code is inside an `if` block that validates the value
+  excludes symbols and objects. Examples: 
+  * if (typeof value === 'string') { }
+  * if (typeof value === 'string' || typeof value === 'number') { }
+  * if (typeof value === 'string' || someOtherTest) { }
+
+  @param - originalValueNode Top-level expression to test. Kept unchanged during
+  recursion.
+  @param - node Expression to test at current recursion level. Will be undefined
+  on non-recursive call.
+*/
+function isInSafeTypeofBlock(originalValueNode, node) {
+  if (!node) {
+    node = originalValueNode;
+  }
+  let parent = node.parent;
+  while (parent) {
+    if (!parent) {
+      return false;
+    }
+    // Normally, if the parent block is inside a type-safe `if` statement,
+    // then all child code is also type-safe. But there's a quirky case we
+    // need to defend against:
+    //   if (typeof obj === 'string') { } else if (typeof obj === 'object') {'' + obj}
+    //   if (typeof obj === 'string') { } else {'' + obj}
+    // In that code above, the `if` block is safe, but the `else` block is
+    // unsafe and should report. But the AST parent of the `else` clause is the
+    // `if` statement. This is the one case where the parent doesn't confer
+    // safety onto the child. The code below identifies that case and keeps
+    // moving up the tree until we get out of the `else`'s parent `if` block.
+    // This ensures that we don't use any of these "parents" (really siblings)
+    // to confer safety onto the current node.
+    if (
+      parent.type === 'IfStatement' &&
+      !isDescendant(originalValueNode, parent.alternate)
+    ) {
+      const test = parent.test;
+      if (isSafeTypeofExpression(originalValueNode, test)) {
+        return true;
+      }
+    }
+    parent = parent.parent;
+  }
+}
+
+const missingDevCheckMessage =
+  'Missing DEV check before this string coercion.' +
+  ' Check should be in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+
+const prevStatementNotDevCheckMessage =
+  'The statement before this coercion must be a DEV check in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+
+/**
+ * Does this node have an "is coercion safe?" DEV check
+ * in the same block?
+ */
+function hasCoercionCheck(node) {
+  // find the containing statement
+  let topOfExpression = node;
+  while (!topOfExpression.parent.body) {
+    topOfExpression = topOfExpression.parent;
+    if (!topOfExpression) {
+      return 'Cannot find top of expression.';
+    }
+  }
+  const containingBlock = topOfExpression.parent.body;
+  const index = containingBlock.indexOf(topOfExpression);
+  if (index <= 0) {
+    return missingDevCheckMessage;
+  }
+  const prev = containingBlock[index - 1];
+
+  // The previous statement is expected to be like this:
+  //   if (__DEV__) {
+  //     checkFormFieldValueStringCoercion(foo);
+  //   }
+  // where `foo` must be equivalent to `node` (which is the
+  // mixed value being coerced to a string).
+  if (
+    prev.type !== 'IfStatement' ||
+    prev.test.type !== 'Identifier' ||
+    prev.test.name !== '__DEV__'
+  ) {
+    return prevStatementNotDevCheckMessage;
+  }
+  let maybeCheckNode = prev.consequent;
+  if (maybeCheckNode.type === 'BlockStatement') {
+    const body = maybeCheckNode.body;
+    if (body.length === 0) {
+      return prevStatementNotDevCheckMessage;
+    }
+    if (body.length !== 1) {
+      return (
+        'Too many statements in DEV block before this coercion.' +
+        ' Expected only one (the check function call). ' +
+        prevStatementNotDevCheckMessage
+      );
+    }
+    maybeCheckNode = body[0];
+  }
+
+  if (maybeCheckNode.type !== 'ExpressionStatement') {
+    return (
+      'The DEV block before this coercion must only contain an expression. ' +
+      prevStatementNotDevCheckMessage
+    );
+  }
+
+  const call = maybeCheckNode.expression;
+  if (
+    call.type !== 'CallExpression' ||
+    call.callee.type !== 'Identifier' ||
+    !/^check(\w+?)StringCoercion$/.test(call.callee.name) ||
+    !call.arguments.length
+  ) {
+    // `maybeCheckNode` should be a call of a function named checkXXXStringCoercion
+    return (
+      'Missing or invalid check function call before this coercion.' +
+      ' Expected: call of a function like checkXXXStringCoercion. ' +
+      prevStatementNotDevCheckMessage
+    );
+  }
+
+  const same = isEquivalentCode(call.arguments[0], node);
+  if (!same) {
+    return (
+      'Value passed to the check function before this coercion' +
+      ' must match the value being coerced.'
+    );
+  }
+}
+
+function plusEmptyString(context, node) {
+  if (
+    node.operator === '+' &&
+    (isEmptyLiteral(node.left) || isEmptyLiteral(node.right))
+  ) {
+    let valueToTest = isEmptyLiteral(node.left) ? node.right : node.left;
+    if (valueToTest.type === 'TypeCastExpression' && valueToTest.expression) {
+      valueToTest = valueToTest.expression;
+    }
+
+    if (
+      valueToTest.type === 'Identifier' &&
+      ['i', 'idx', 'lineNumber'].includes(valueToTest.name)
+    ) {
+      // Common non-object variable names are assumed to be safe
+      return;
+    }
+    if (
+      valueToTest.type === 'UnaryExpression' ||
+      valueToTest.type === 'UpdateExpression'
+    ) {
+      // Any unary expression will return a non-object, non-symbol type.
+      return;
+    }
+    if (isInSafeTypeofBlock(valueToTest)) {
+      // The value is inside an if (typeof...) block that ensures it's safe
+      return;
+    }
+    const coercionCheckMessage = hasCoercionCheck(valueToTest);
+    if (!coercionCheckMessage) {
+      // The previous statement is a correct check function call, so no report.
+      return;
+    }
+
+    context.report({
+      node,
+      message:
+        coercionCheckMessage +
+        '\n' +
+        "Using `'' + value` or `value + ''` is fast to coerce strings, but may throw." +
+        ' For prod code, add a DEV check from shared/CheckStringCoercion immediately' +
+        ' before this coercion.' +
+        ' For non-prod code and prod error handling, use `String(value)` instead.',
+    });
+  }
+}
+
+function coerceWithStringConstructor(context, node) {
+  const isProductionUserAppCode =
+    context.options[0] && context.options[0].isProductionUserAppCode;
+  if (isProductionUserAppCode && node.callee.name === 'String') {
+    context.report(
+      node,
+      "For perf-sensitive coercion, avoid `String(value)`. Instead, use `'' + value`." +
+        ' Precede it with a DEV check from shared/CheckStringCoercion' +
+        ' unless Symbol and Temporal.* values are impossible.' +
+        ' For non-prod code and prod error handling, use `String(value)` and disable this rule.'
+    );
+  }
+}
+
+module.exports = {
+  meta: {
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          isProductionUserAppCode: {
+            type: 'boolean',
+            default: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    return {
+      BinaryExpression: node => plusEmptyString(context, node),
+      CallExpression: node => coerceWithStringConstructor(context, node),
+    };
+  },
+};
diff --git a/scripts/flow/runFlow.js b/scripts/flow/runFlow.js
index 252bf8952a15e..c1917abf967da 100644
--- a/scripts/flow/runFlow.js
+++ b/scripts/flow/runFlow.js
@@ -33,8 +33,8 @@ async function runFlow(renderer, args) {
     const srcStat = fs.statSync(__dirname + '/config/flowconfig');
     const destPath = './.flowconfig';
     if (fs.existsSync(destPath)) {
-      const oldConfig = fs.readFileSync(destPath) + '';
-      const newConfig = fs.readFileSync(srcPath) + '';
+      const oldConfig = String(fs.readFileSync(destPath));
+      const newConfig = String(fs.readFileSync(srcPath));
       if (oldConfig !== newConfig) {
         // Use the mtime to detect if the file was manually edited. If so,
         // log an error.
diff --git a/scripts/merge-fork/merge-fork.js b/scripts/merge-fork/merge-fork.js
index ccefc8c0d0b6e..1b054dd395cad 100644
--- a/scripts/merge-fork/merge-fork.js
+++ b/scripts/merge-fork/merge-fork.js
@@ -90,7 +90,7 @@ for (const {base: baseFilename, from, to} of getTransforms()) {
     }
   );
   if (gitShowResult.status !== 0) {
-    console.error('' + gitShowResult.stderr);
+    console.error(String(gitShowResult.stderr));
     continue;
   }
 
@@ -104,6 +104,6 @@ for (const {base: baseFilename, from, to} of getTransforms()) {
   });
 
   if (mergeFileResult.status !== 0) {
-    console.error('' + mergeFileResult.stderr);
+    console.error(String(mergeFileResult.stderr));
   }
 }
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 10a455d5dbbcc..acd07d32d3444 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -18,13 +18,13 @@ const {
 // Runs the build script for both stable and experimental release channels,
 // by configuring an environment variable.
 
-const sha = (
-  spawnSync('git', ['show', '-s', '--format=%h']).stdout + ''
+const sha = String(
+  spawnSync('git', ['show', '-s', '--format=%h']).stdout
 ).trim();
 
-let dateString = (
+let dateString = String(
   spawnSync('git', ['show', '-s', '--format=%cd', '--date=format:%Y%m%d', sha])
-    .stdout + ''
+    .stdout
 ).trim();
 
 // On CI environment, this string is wrapped with quotes '...'s