From a6f0948326ce6e63c99422400c84f521a1e86050 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Tue, 14 Aug 2018 10:49:52 -0700
Subject: [PATCH 01/10] Update attribute-table

* Add to-string protection to SSR
* Add validation step to inputs
* Only validate textarea value prop
* Properly handle true/false and NaN
* Simplify validation by doing it ahead of time
* Tweak toStringValue comment
* defaultValue and defaultChecked are no longer reserved words
* Use correct type for defaultValue and defaultChecked
* Add test coverage and fixes for mixed type selection on options
* Improve comment about backwards compatibility with defaultValue
* Align defaultValue and defaultChecked with value and checked
---
 .../AttributeTableSnapshot.md                 | 36 ++++-----
 .../src/__tests__/ReactDOMInput-test.js       | 20 +++--
 .../src/__tests__/ReactDOMSelect-test.js      | 43 +++++-----
 .../ReactDOMServerIntegrationSelect-test.js   | 81 ++++++++++++++++++-
 .../ReactDOMServerIntegrationTextarea-test.js | 71 +++++++++++++++-
 ...OMServerIntegrationUserInteraction-test.js |  1 +
 .../src/__tests__/ReactDOMTextarea-test.js    | 26 ++++--
 .../react-dom/src/client/ReactDOMComponent.js | 13 ++-
 .../react-dom/src/client/ReactDOMInput.js     |  4 +-
 .../react-dom/src/client/ReactDOMOption.js    |  2 +-
 .../react-dom/src/client/ReactDOMSelect.js    |  3 +-
 .../react-dom/src/client/ReactDOMTextarea.js  |  4 +-
 .../src/server/ReactPartialRenderer.js        | 30 ++++---
 packages/react-dom/src/shared/DOMProperty.js  | 23 ++++--
 .../src/shared/ReactDOMUnknownPropertyHook.js |  6 --
 .../src/{client => shared}/ToStringValue.js   |  6 +-
 16 files changed, 282 insertions(+), 87 deletions(-)
 rename packages/react-dom/src/{client => shared}/ToStringValue.js (80%)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index c924b215355dd..4bdc0050b9096 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -2560,16 +2560,16 @@
 | `defaultChecked=(-1)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(0)`| (initial)| `<boolean: false>` |
 | `defaultChecked=(integer)`| (changed)| `<boolean: true>` |
-| `defaultChecked=(NaN)`| (initial, warning, ssr warning)| `<boolean: false>` |
+| `defaultChecked=(NaN)`| (initial, warning)| `<boolean: false>` |
 | `defaultChecked=(float)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(true)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(false)`| (initial)| `<boolean: false>` |
-| `defaultChecked=(string 'true')`| (changed)| `<boolean: true>` |
-| `defaultChecked=(string 'false')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `defaultChecked=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `defaultChecked=(string 'on')`| (changed)| `<boolean: true>` |
 | `defaultChecked=(string 'off')`| (changed)| `<boolean: true>` |
-| `defaultChecked=(symbol)`| (changed, ssr mismatch)| `<boolean: true>` |
-| `defaultChecked=(function)`| (changed, ssr mismatch)| `<boolean: true>` |
+| `defaultChecked=(symbol)`| (changed, warning, ssr mismatch)| `<boolean: true>` |
+| `defaultChecked=(function)`| (changed, warning, ssr mismatch)| `<boolean: true>` |
 | `defaultChecked=(null)`| (initial)| `<boolean: false>` |
 | `defaultChecked=(undefined)`| (initial)| `<boolean: false>` |
 
@@ -2593,9 +2593,9 @@
 | `defaultValue=(string 'false')`| (changed)| `"false"` |
 | `defaultValue=(string 'on')`| (changed)| `"on"` |
 | `defaultValue=(string 'off')`| (changed)| `"off"` |
-| `defaultValue=(symbol)`| (initial, ssr warning)| `<empty string>` |
-| `defaultValue=(function)`| (initial, ssr warning)| `<empty string>` |
-| `defaultValue=(null)`| (initial, ssr warning)| `<empty string>` |
+| `defaultValue=(symbol)`| (initial, warning)| `<empty string>` |
+| `defaultValue=(function)`| (initial, warning)| `<empty string>` |
+| `defaultValue=(null)`| (initial)| `<empty string>` |
 | `defaultValue=(undefined)`| (initial)| `<empty string>` |
 
 ## `defaultValuE` (on `<input>` inside `<div>`)
@@ -11785,7 +11785,7 @@
 | `value=(-1)`| (changed)| `"-1"` |
 | `value=(0)`| (changed)| `"0"` |
 | `value=(integer)`| (changed)| `"1"` |
-| `value=(NaN)`| (changed, warning, ssr warning)| `"NaN"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
 | `value=(float)`| (changed)| `"99.99"` |
 | `value=(true)`| (changed)| `"true"` |
 | `value=(false)`| (changed)| `"false"` |
@@ -11793,9 +11793,9 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning, ssr warning)| `<empty string>` |
-| `value=(function)`| (initial, warning, ssr warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<input>` inside `<div>`)
@@ -11820,7 +11820,7 @@
 | `value=(string 'off')`| (changed)| `"off"` |
 | `value=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<input>` inside `<div>`)
@@ -11845,7 +11845,7 @@
 | `value=(string 'off')`| (initial)| `<empty string>` |
 | `value=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<textarea>` inside `<div>`)
@@ -11860,7 +11860,7 @@
 | `value=(-1)`| (changed)| `"-1"` |
 | `value=(0)`| (changed)| `"0"` |
 | `value=(integer)`| (changed)| `"1"` |
-| `value=(NaN)`| (changed, warning, ssr warning)| `"NaN"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
 | `value=(float)`| (changed)| `"99.99"` |
 | `value=(true)`| (changed)| `"true"` |
 | `value=(false)`| (changed)| `"false"` |
@@ -11868,9 +11868,9 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `value=(function)`| (initial, warning, ssr mismatch)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<option>` inside `<select>`)
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 86aab62ca39d2..a46a73e852184 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -1799,22 +1799,24 @@ describe('ReactDOMInput', () => {
     });
 
     it('treats initial Symbol defaultValue as an empty string', function() {
-      ReactDOM.render(<input defaultValue={Symbol('foobar')} />, container);
+      expect(() =>
+        ReactDOM.render(<input defaultValue={Symbol('foobar')} />, container),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
       expect(node.getAttribute('value')).toBe('');
-      // TODO: we should warn here.
     });
 
     it('treats updated Symbol defaultValue as an empty string', function() {
       ReactDOM.render(<input defaultValue="foo" />, container);
-      ReactDOM.render(<input defaultValue={Symbol('foobar')} />, container);
+      expect(() =>
+        ReactDOM.render(<input defaultValue={Symbol('foobar')} />, container),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
       expect(node.value).toBe('foo');
       expect(node.getAttribute('value')).toBe('');
-      // TODO: we should warn here.
     });
   });
 
@@ -1847,22 +1849,24 @@ describe('ReactDOMInput', () => {
     });
 
     it('treats initial function defaultValue as an empty string', function() {
-      ReactDOM.render(<input defaultValue={() => {}} />, container);
+      expect(() =>
+        ReactDOM.render(<input defaultValue={() => {}} />, container),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
       expect(node.getAttribute('value')).toBe('');
-      // TODO: we should warn here.
     });
 
     it('treats updated function defaultValue as an empty string', function() {
       ReactDOM.render(<input defaultValue="foo" />, container);
-      ReactDOM.render(<input defaultValue={() => {}} />, container);
+      expect(() =>
+        ReactDOM.render(<input defaultValue={() => {}} />, container),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
       expect(node.value).toBe('foo');
       expect(node.getAttribute('value')).toBe('');
-      // TODO: we should warn here.
     });
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index bd87c4543e95f..a7c5e58f8d93c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -858,14 +858,15 @@ describe('ReactDOMSelect', () => {
       expect(() => {
         node = ReactTestUtils.renderIntoDocument(
           <select defaultValue={Symbol('foobar')}>
-            <option value={Symbol('foobar')}>A Symbol!</option>
             <option value="monkey">A monkey!</option>
+            <option value="">Empty String</option>
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toWarnDev('Invalid value for prop `defaultValue`');
 
       expect(node.value).toBe('');
+      expect(node.options[1].selected).toBe(true);
     });
 
     it('treats updated Symbol defaultValue as an empty string', () => {
@@ -883,15 +884,18 @@ describe('ReactDOMSelect', () => {
 
       expect(node.value).toBe('monkey');
 
-      node = ReactTestUtils.renderIntoDocument(
-        <select defaultValue={Symbol('foobar')}>
-          <option value={Symbol('foobar')}>A Symbol!</option>
-          <option value="monkey">A monkey!</option>
-          <option value="giraffe">A giraffe!</option>
-        </select>,
-      );
+      expect(() => {
+        node = ReactTestUtils.renderIntoDocument(
+          <select defaultValue={Symbol('foobar')}>
+            <option value="monkey">A monkey!</option>
+            <option value="">Empty String</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      }).toWarnDev('Invalid value for prop `defaultValue`');
 
       expect(node.value).toBe('');
+      expect(node.options[1].selected).toBe(true);
     });
   });
 
@@ -918,14 +922,15 @@ describe('ReactDOMSelect', () => {
       expect(() => {
         node = ReactTestUtils.renderIntoDocument(
           <select defaultValue={() => {}}>
-            <option value={() => {}}>A function!</option>
             <option value="monkey">A monkey!</option>
+            <option value="">Empty String</option>
             <option value="giraffe">A giraffe!</option>
           </select>,
         );
-      }).toWarnDev('Invalid value for prop `value`');
+      }).toWarnDev('Invalid value for prop `defaultValue`');
 
       expect(node.value).toBe('');
+      expect(node.options[1].selected).toBe(true);
     });
 
     it('treats updated function value as an empty string', () => {
@@ -969,13 +974,15 @@ describe('ReactDOMSelect', () => {
 
       expect(node.value).toBe('monkey');
 
-      node = ReactTestUtils.renderIntoDocument(
-        <select defaultValue={() => {}}>
-          <option value={() => {}}>A function!</option>
-          <option value="monkey">A monkey!</option>
-          <option value="giraffe">A giraffe!</option>
-        </select>,
-      );
+      expect(() => {
+        node = ReactTestUtils.renderIntoDocument(
+          <select defaultValue={() => {}}>
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      }).toWarnDev('Invalid value for prop `defaultValue`');
 
       expect(node.value).toBe('');
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 486b2a81a6925..45f2cab965bb2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -36,10 +36,12 @@ const {
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegrationSelect', () => {
-  let options;
   beforeEach(() => {
     resetModules();
+  });
 
+  let options;
+  beforeEach(function() {
     options = [
       <option key={1} value="foo" id="foo">
         Foo
@@ -247,4 +249,81 @@ describe('ReactDOMServerIntegrationSelect', () => {
       expect(e.firstChild.selected).toBe(true);
     },
   );
+
+  itRenders('a select with Symbol value with a warning', async render => {
+    const e = await render(
+      <select value={Symbol('test')} readOnly={true} />,
+      1,
+    );
+    expect(e.hasAttribute('value')).toBe(false);
+  });
+
+  itRenders('an option with Symbol value with a warning', async render => {
+    const e = await render(
+      <select readOnly={true} value={Symbol('test')}>
+        <option value={Symbol('test')} />
+      </select>,
+      1,
+    );
+    expect(e.value).toBe('');
+    expect(e.firstChild.value).toBe('');
+  });
+
+  itRenders('a select with NaN value with a warning', async render => {
+    const e = await render(
+      <select value={NaN} readOnly={true}>
+        <option value="NaN">NaN</option>
+      </select>,
+      1,
+    );
+    expect(e.value).toBe('NaN');
+  });
+
+  itRenders('a select with NaN defaultValue with a warning', async render => {
+    const e = await render(
+      <select defaultValue={NaN} readOnly={true}>
+        <option value="NaN">NaN</option>
+      </select>,
+      1,
+    );
+    expect(e.value).toBe('NaN');
+  });
+
+  itRenders('a select with function value with a warning', async render => {
+    const e = await render(
+      <select value={() => {}} readOnly={true}>
+        <option>First option</option>
+        <option value={(() => {}).toString()} />
+      </select>,
+      1,
+    );
+    expect(e.value).toBe('First option');
+  });
+
+  itRenders(
+    'a select with function defaultValue with a warning',
+    async render => {
+      const e = await render(
+        <select defaultValue={() => {}} readOnly={true}>
+          <option>First option</option>
+          <option value={(() => {}).toString()} />
+        </select>,
+        1,
+      );
+      expect(e.value).toBe('First option');
+    },
+  );
+
+  itRenders(
+    'selects the correct option even with a type mismatch',
+    async render => {
+      const e = await render(
+        <select value={3} readOnly={true}>
+          <option>None</option>
+          <option value="3">3</option>
+        </select>,
+      );
+      expect(e.options[1].selected).toBe(true);
+    },
+  );
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
index 2b0faddcd2c44..09a277dda4c8d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -31,13 +31,11 @@ function initModules() {
 
 const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
 
-describe('ReactDOMServerIntegrationTextarea', () => {
+describe('ReactDOMServerIntegrationTextareas', () => {
   beforeEach(() => {
     resetModules();
   });
 
-  // textareas
-  // ---------
   itRenders('a textarea with a value and an onChange', async render => {
     const e = await render(<textarea value="foo" onChange={() => {}} />);
     // textarea DOM elements don't have a value **attribute**, the text is
@@ -94,4 +92,71 @@ describe('ReactDOMServerIntegrationTextarea', () => {
       expect(e.value).toBe('foo');
     },
   );
+
+  itRenders('a textarea with Symbol value with a warning', async render => {
+    const e = await render(
+      <textarea value={Symbol('test')} readOnly={true} />,
+      1,
+    );
+    expect(e.value).toBe('');
+  });
+
+  itRenders(
+    'a textarea with Symbol defaultValue with a warning',
+    async render => {
+      const e = await render(
+        <textarea defaultValue={Symbol('test')} readOnly={true} />,
+        1,
+      );
+      expect(e.value).toBe('');
+    },
+  );
+
+  itRenders('a textarea with NaN value with a warning', async render => {
+    const e = await render(<textarea value={NaN} readOnly={true} />, 1);
+    expect(e.value).toBe('NaN');
+  });
+
+  itRenders('a textarea with NaN defaultValue with a warning', async render => {
+    const e = await render(<textarea defaultValue={NaN} readOnly={true} />, 1);
+    expect(e.value).toBe('NaN');
+  });
+
+  itRenders('a textarea with function value with a warning', async render => {
+    const e = await render(<textarea value={() => {}} readOnly={true} />, 1);
+    expect(e.value).toBe('');
+  });
+
+  itRenders(
+    'a textarea with function defaultValue with a warning',
+    async render => {
+      const e = await render(
+        <textarea defaultValue={() => {}} readOnly={true} />,
+        1,
+      );
+      expect(e.value).toBe('');
+    },
+  );
+
+  itRenders('a textarea with Object value with a warning', async render => {
+    const value = {
+      toString() {
+        return 'result of toString()';
+      },
+    };
+
+    const e = await render(<textarea value={value} readOnly={true} />, 0);
+
+    expect(e.value).toBe('result of toString()');
+  });
+
+  itRenders('a textarea with true value with a warning', async render => {
+    const e = await render(<textarea value={true} readOnly={true} />, 0);
+    expect(e.value).toBe('true');
+  });
+
+  itRenders('a textarea with false value with a warning', async render => {
+    const e = await render(<textarea value={false} readOnly={true} />, 0);
+    expect(e.value).toBe('false');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
index 558aad7648b40..4b8fe534da232 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
@@ -41,6 +41,7 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
 
   beforeEach(() => {
     resetModules();
+
     ControlledInput = class extends React.Component {
       static defaultProps = {
         type: 'text',
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index c9d4a9d8a2d1d..c6da61fa2b783 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -469,20 +469,28 @@ describe('ReactDOMTextarea', () => {
 
     it('treats initial Symbol defaultValue as an empty string', () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea defaultValue={Symbol('foobar')} />, container);
+      expect(() =>
+        ReactDOM.render(
+          <textarea defaultValue={Symbol('foobar')} />,
+          container,
+        ),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
-      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
       expect(node.value).toBe('');
     });
 
     it('treats updated Symbol defaultValue as an empty string', () => {
       const container = document.createElement('div');
       ReactDOM.render(<textarea defaultValue="foo" />, container);
-      ReactDOM.render(<textarea defaultValue={Symbol('foobar')} />, container);
+      expect(() =>
+        ReactDOM.render(
+          <textarea defaultValue={Symbol('foobar')} />,
+          container,
+        ),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
-      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
       expect(node.value).toBe('foo');
     });
   });
@@ -530,20 +538,22 @@ describe('ReactDOMTextarea', () => {
 
     it('treats initial function defaultValue as an empty string', () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea defaultValue={() => {}} />, container);
+      expect(() =>
+        ReactDOM.render(<textarea defaultValue={() => {}} />, container),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
-      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
       expect(node.value).toBe('');
     });
 
     it('treats updated function defaultValue as an empty string', () => {
       const container = document.createElement('div');
       ReactDOM.render(<textarea defaultValue="foo" />, container);
-      ReactDOM.render(<textarea defaultValue={() => {}} />, container);
+      expect(() =>
+        ReactDOM.render(<textarea defaultValue={() => {}} />, container),
+      ).toWarnDev('Invalid value for prop `defaultValue`');
       const node = container.firstChild;
 
-      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
       expect(node.value).toBe('foo');
     });
   });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 4fded23f31a7d..810a4cbcf94b5 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -860,6 +860,7 @@ export function diffHydratedProperties(
     }
   }
 
+  let props = rawProps;
   // TODO: Make sure that we check isMounted before firing any of these events.
   switch (tag) {
     case 'iframe':
@@ -891,6 +892,7 @@ export function diffHydratedProperties(
       break;
     case 'input':
       ReactDOMInput.initWrapperState(domElement, rawProps);
+      props = ReactDOMInput.getHostProps(domElement, rawProps);
       trapBubbledEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
@@ -898,9 +900,11 @@ export function diffHydratedProperties(
       break;
     case 'option':
       ReactDOMOption.validateProps(domElement, rawProps);
+      props = ReactDOMOption.getHostProps(domElement, rawProps);
       break;
     case 'select':
       ReactDOMSelect.initWrapperState(domElement, rawProps);
+      props = ReactDOMSelect.getHostProps(domElement, rawProps);
       trapBubbledEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
@@ -908,6 +912,7 @@ export function diffHydratedProperties(
       break;
     case 'textarea':
       ReactDOMTextarea.initWrapperState(domElement, rawProps);
+      props = ReactDOMTextarea.getHostProps(domElement, rawProps);
       trapBubbledEvent(TOP_INVALID, domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
@@ -915,7 +920,7 @@ export function diffHydratedProperties(
       break;
   }
 
-  assertValidProps(tag, rawProps);
+  assertValidProps(tag, props);
 
   if (__DEV__) {
     extraAttributeNames = new Set();
@@ -943,11 +948,11 @@ export function diffHydratedProperties(
   }
 
   let updatePayload = null;
-  for (const propKey in rawProps) {
-    if (!rawProps.hasOwnProperty(propKey)) {
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
       continue;
     }
-    const nextProp = rawProps[propKey];
+    const nextProp = props[propKey];
     if (propKey === CHILDREN) {
       // For text content children we compare against textContent. This
       // might match additional HTML that is hidden when we read it using
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 9221975f1a4fb..f3b350ba7a55a 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -14,11 +14,11 @@ import warning from 'shared/warning';
 
 import * as DOMPropertyOperations from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
-import {getToStringValue, toString} from './ToStringValue';
+import {getToStringValue, toString} from '../shared/ToStringValue';
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
 import * as inputValueTracking from './inputValueTracking';
 
-import type {ToStringValue} from './ToStringValue';
+import type {ToStringValue} from '../shared/ToStringValue';
 
 type InputWithWrapperState = HTMLInputElement & {
   _wrapperState: {
diff --git a/packages/react-dom/src/client/ReactDOMOption.js b/packages/react-dom/src/client/ReactDOMOption.js
index 6007600ead42a..7fe61f0797aa8 100644
--- a/packages/react-dom/src/client/ReactDOMOption.js
+++ b/packages/react-dom/src/client/ReactDOMOption.js
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import warning from 'shared/warning';
-import {getToStringValue, toString} from './ToStringValue';
+import {getToStringValue, toString} from '../shared/ToStringValue';
 
 let didWarnSelectedSetOnOption = false;
 let didWarnInvalidChild = false;
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index 3bc982d77c6a7..f62023d823ddf 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -12,7 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 import warning from 'shared/warning';
 
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
-import {getToStringValue, toString} from './ToStringValue';
+import {getToStringValue, toString} from '../shared/ToStringValue';
 
 let didWarnValueDefaultValue;
 
@@ -137,6 +137,7 @@ function updateOptions(
 export function getHostProps(element: Element, props: Object) {
   return Object.assign({}, props, {
     value: undefined,
+    defaultValue: undefined,
   });
 }
 
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index a0b244afcd205..34c4bfb566108 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -12,8 +12,8 @@ import warning from 'shared/warning';
 
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import {getToStringValue, toString} from './ToStringValue';
-import type {ToStringValue} from './ToStringValue';
+import {getToStringValue, toString} from '../shared/ToStringValue';
+import type {ToStringValue} from '../shared/ToStringValue';
 
 let didWarnValDefaultVal = false;
 
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 8989eaa1369ce..c5bdbdbbfcac9 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -23,6 +23,7 @@ import warningWithoutStack from 'shared/warningWithoutStack';
 import checkPropTypes from 'prop-types/checkPropTypes';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+
 import {
   warnAboutDeprecatedLifecycles,
   enableSuspenseServerRenderer,
@@ -61,6 +62,11 @@ import warnValidStyle from '../shared/warnValidStyle';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import {
+  toString,
+  getToStringValue,
+  isSameStringValue,
+} from '../shared/ToStringValue';
 
 // Based on reading the React.Children implementation. TODO: type this somewhere?
 type ReactNode = string | number | ReactElement;
@@ -1067,6 +1073,11 @@ class ReactDOMServerRenderer {
     validateDangerousTag(tag);
 
     let props = element.props;
+
+    if (__DEV__) {
+      validatePropertiesInDevelopment(tag, props);
+    }
+
     if (tag === 'input') {
       if (__DEV__) {
         ReactControlledValuePropTypes.checkPropTypes('input', props);
@@ -1166,7 +1177,7 @@ class ReactDOMServerRenderer {
             textareaChildren = textareaChildren[0];
           }
 
-          defaultValue = '' + textareaChildren;
+          defaultValue = textareaChildren;
         }
         if (defaultValue == null) {
           defaultValue = '';
@@ -1174,9 +1185,12 @@ class ReactDOMServerRenderer {
         initialValue = defaultValue;
       }
 
+      initialValue = toString(getToStringValue(initialValue));
+
       props = Object.assign({}, props, {
         value: undefined,
-        children: '' + initialValue,
+        defaultValue: undefined,
+        children: initialValue,
       });
     } else if (tag === 'select') {
       if (__DEV__) {
@@ -1225,6 +1239,7 @@ class ReactDOMServerRenderer {
         props.value != null ? props.value : props.defaultValue;
       props = Object.assign({}, props, {
         value: undefined,
+        defaultValue: undefined,
       });
     } else if (tag === 'option') {
       let selected = null;
@@ -1233,21 +1248,22 @@ class ReactDOMServerRenderer {
       if (selectValue != null) {
         let value;
         if (props.value != null) {
-          value = props.value + '';
+          value = props.value;
         } else {
           value = optionChildren;
         }
+
         selected = false;
         if (Array.isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
-            if ('' + selectValue[j] === value) {
+            if (isSameStringValue(selectValue[j], value)) {
               selected = true;
               break;
             }
           }
         } else {
-          selected = '' + selectValue === value;
+          selected = isSameStringValue(selectValue, value);
         }
 
         props = Object.assign(
@@ -1264,10 +1280,6 @@ class ReactDOMServerRenderer {
       }
     }
 
-    if (__DEV__) {
-      validatePropertiesInDevelopment(tag, props);
-    }
-
     assertValidProps(tag, props);
 
     let out = createOpenTagMarkup(
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index f049205d199cc..8212d107ef4d7 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -207,11 +207,6 @@ const properties = {};
 [
   'children',
   'dangerouslySetInnerHTML',
-  // TODO: This prevents the assignment of defaultValue to regular
-  // elements (not just inputs). Now that ReactDOMInput assigns to the
-  // defaultValue property -- do we need this?
-  'defaultValue',
-  'defaultChecked',
   'innerHTML',
   'suppressContentEditableWarning',
   'suppressHydrationWarning',
@@ -256,6 +251,15 @@ const properties = {};
   );
 });
 
+// defaultValue is the property version of the value attribute
+properties.defaultValue = new PropertyInfoRecord(
+  'defaultValue',
+  BOOLEANISH_STRING,
+  false,
+  'value',
+  null,
+);
+
 // These are "enumerated" SVG attributes that accept "true" and "false".
 // In React, we let users pass `true` and `false` even though technically
 // these aren't boolean attributes (they are coerced to strings).
@@ -353,6 +357,15 @@ const properties = {};
   );
 });
 
+// defaultChecked is the property version of the checked attribute
+properties.defaultChecked = new PropertyInfoRecord(
+  'defaultChecked',
+  BOOLEAN,
+  false,
+  'checked',
+  null,
+);
+
 // These are HTML attributes that must be positive numbers.
 [
   'cols',
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index f3d43f1846590..1afc59854bb61 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -215,12 +215,6 @@ if (__DEV__) {
       return true;
     }
 
-    // Now that we've validated casing, do not validate
-    // data types for reserved props
-    if (isReserved) {
-      return true;
-    }
-
     // Warn when a known attribute is a bad type
     if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
       warnedProperties[name] = true;
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/shared/ToStringValue.js
similarity index 80%
rename from packages/react-dom/src/client/ToStringValue.js
rename to packages/react-dom/src/shared/ToStringValue.js
index 41826cd404e05..a719d3c574a80 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/shared/ToStringValue.js
@@ -31,7 +31,11 @@ export function getToStringValue(value: mixed): ToStringValue {
     case 'undefined':
       return value;
     default:
-      // function, symbol are assigned as empty strings
+      // function and symbol are assigned as empty strings
       return '';
   }
 }
+
+export function isSameStringValue(a: mixed, b: mixed): boolean {
+  return toString(getToStringValue(a)) === toString(getToStringValue(b));
+}

From 5015f96e4165b833bba87612f047fe9b7fe965cc Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Sat, 8 Sep 2018 11:46:48 -0700
Subject: [PATCH 02/10] Revert some test updates from master SSR tests

---
 .../src/__tests__/ReactDOMServerIntegrationSelect-test.js   | 6 ++----
 .../src/__tests__/ReactDOMServerIntegrationTextarea-test.js | 2 +-
 .../ReactDOMServerIntegrationUserInteraction-test.js        | 1 -
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 45f2cab965bb2..5dd13cc9771d4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -36,12 +36,10 @@ const {
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegrationSelect', () => {
-  beforeEach(() => {
-    resetModules();
-  });
-
   let options;
   beforeEach(function() {
+    resetModules();
+
     options = [
       <option key={1} value="foo" id="foo">
         Foo
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
index 09a277dda4c8d..89b02c9768a40 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -31,7 +31,7 @@ function initModules() {
 
 const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
 
-describe('ReactDOMServerIntegrationTextareas', () => {
+describe('ReactDOMServerIntegrationTextarea', () => {
   beforeEach(() => {
     resetModules();
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
index 4b8fe534da232..558aad7648b40 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
@@ -41,7 +41,6 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
 
   beforeEach(() => {
     resetModules();
-
     ControlledInput = class extends React.Component {
       static defaultProps = {
         type: 'text',

From 257293d0130ebd009e8c5f2e8cc1766c0a8df1e4 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Sat, 8 Sep 2018 11:50:47 -0700
Subject: [PATCH 03/10] Revert arrow to function change in Select SSR test

---
 .../src/__tests__/ReactDOMServerIntegrationSelect-test.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 5dd13cc9771d4..21f50f85ab12a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -37,7 +37,7 @@ const {
 
 describe('ReactDOMServerIntegrationSelect', () => {
   let options;
-  beforeEach(function() {
+  beforeEach(() => {
     resetModules();
 
     options = [

From a8ea1b9846be89085d3372c9a0750cd7ebe66763 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:34:07 -0700
Subject: [PATCH 04/10] Eliminate toString usage on selects

---
 .../ReactDOMServerIntegrationSelect-test.js   | 31 ++++++++++++++++++-
 .../src/server/ReactPartialRenderer.js        | 11 ++++---
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 21f50f85ab12a..79645a7498ac1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -313,7 +313,7 @@ describe('ReactDOMServerIntegrationSelect', () => {
   );
 
   itRenders(
-    'selects the correct option even with a type mismatch',
+    'selects the correct option even with an option type mismatch',
     async render => {
       const e = await render(
         <select value={3} readOnly={true}>
@@ -324,4 +324,33 @@ describe('ReactDOMServerIntegrationSelect', () => {
       expect(e.options[1].selected).toBe(true);
     },
   );
+
+  itRenders(
+    'selects the correct option even with a select type mismatch',
+    async render => {
+      const e = await render(
+        <select value="3" readOnly={true}>
+          <option>None</option>
+          <option value={3}>3</option>
+        </select>,
+      );
+      expect(e.options[1].selected).toBe(true);
+    },
+  );
+
+  itRenders(
+    'multiselects the correct options even with a type mismatch',
+    async render => {
+      const e = await render(
+        <select multiple={true} value={[1,3]} readOnly={true}>
+          <option>None</option>
+          <option value="1">1</option>
+          <option value="3">3</option>
+        </select>,
+      );
+      expect(e.options[0].selected).toBe(false);
+      expect(e.options[1].selected).toBe(true);
+      expect(e.options[2].selected).toBe(true);
+    },
+  );
 });
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index c5bdbdbbfcac9..2dfb32018d1c7 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1235,8 +1235,9 @@ class ReactDOMServerRenderer {
           didWarnDefaultSelectValue = true;
         }
       }
-      this.currentSelectValue =
-        props.value != null ? props.value : props.defaultValue;
+      this.currentSelectValue = getToStringValue(
+        props.value != null ? props.value : props.defaultValue,
+      );
       props = Object.assign({}, props, {
         value: undefined,
         defaultValue: undefined,
@@ -1248,9 +1249,9 @@ class ReactDOMServerRenderer {
       if (selectValue != null) {
         let value;
         if (props.value != null) {
-          value = props.value;
+          value = getToStringValue(props.value);
         } else {
-          value = optionChildren;
+          value = optionChildren
         }
 
         selected = false;
@@ -1263,7 +1264,7 @@ class ReactDOMServerRenderer {
             }
           }
         } else {
-          selected = isSameStringValue(selectValue, value);
+          selected = '' + selectValue === '' + value;
         }
 
         props = Object.assign(

From 5bed9b002113f3e709b55c875d01a60482ab35d0 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:37:16 -0700
Subject: [PATCH 05/10] Ensure multiple checked works in both directions

---
 .../src/__tests__/ReactDOMServerIntegrationSelect-test.js    | 4 ++--
 packages/react-dom/src/server/ReactPartialRenderer.js        | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 79645a7498ac1..a18e38ee92b16 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -342,10 +342,10 @@ describe('ReactDOMServerIntegrationSelect', () => {
     'multiselects the correct options even with a type mismatch',
     async render => {
       const e = await render(
-        <select multiple={true} value={[1,3]} readOnly={true}>
+        <select multiple={true} value={[1,"3"]} readOnly={true}>
           <option>None</option>
           <option value="1">1</option>
-          <option value="3">3</option>
+          <option value={3}>3</option>
         </select>,
       );
       expect(e.options[0].selected).toBe(false);
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 2dfb32018d1c7..ec7a0fb2ee516 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -63,7 +63,6 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 import {
-  toString,
   getToStringValue,
   isSameStringValue,
 } from '../shared/ToStringValue';
@@ -1185,7 +1184,7 @@ class ReactDOMServerRenderer {
         initialValue = defaultValue;
       }
 
-      initialValue = toString(getToStringValue(initialValue));
+      initialValue = '' + getToStringValue(initialValue);
 
       props = Object.assign({}, props, {
         value: undefined,
@@ -1258,7 +1257,7 @@ class ReactDOMServerRenderer {
         if (Array.isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
-            if (isSameStringValue(selectValue[j], value)) {
+            if ('' + getToStringValue(selectValue[j]) === '' + value) {
               selected = true;
               break;
             }

From 53e5033567d06b1df62b4b12b9eded3c7b31393c Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:38:05 -0700
Subject: [PATCH 06/10] Remove all toString usage in client select code

---
 packages/react-dom/src/client/ReactDOMSelect.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index f62023d823ddf..791a466feccaf 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -12,7 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 import warning from 'shared/warning';
 
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
-import {getToStringValue, toString} from '../shared/ToStringValue';
+import {getToStringValue} from '../shared/ToStringValue';
 
 let didWarnValueDefaultValue;
 
@@ -98,7 +98,7 @@ function updateOptions(
   } else {
     // Do not set `select.value` as exact behavior isn't consistent across all
     // browsers for all cases.
-    let selectedValue = toString(getToStringValue((propValue: any)));
+    let selectedValue = '' + getToStringValue((propValue: any))
     let defaultSelected = null;
     for (let i = 0; i < options.length; i++) {
       if (options[i].value === selectedValue) {

From d094bdb9fd514a4ee7081fb86643880f845a6da8 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:39:50 -0700
Subject: [PATCH 07/10] Remove toString usage in reactdominput

---
 packages/react-dom/src/client/ReactDOMInput.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index f3b350ba7a55a..142fc9a544914 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -14,7 +14,7 @@ import warning from 'shared/warning';
 
 import * as DOMPropertyOperations from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
-import {getToStringValue, toString} from '../shared/ToStringValue';
+import {getToStringValue} from '../shared/ToStringValue';
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
 import * as inputValueTracking from './inputValueTracking';
 
@@ -182,10 +182,10 @@ export function updateWrapper(element: Element, props: Object) {
         // eslint-disable-next-line
         node.value != (value: any)
       ) {
-        node.value = toString(value);
+        node.value = value;
       }
-    } else if (node.value !== toString(value)) {
-      node.value = toString(value);
+    } else if (node.value !== '' + value) {
+      node.value = value
     }
   } else if (type === 'submit' || type === 'reset') {
     // Submit/reset inputs need the attribute removed completely to avoid
@@ -223,7 +223,7 @@ export function postMountWrapper(
       return;
     }
 
-    const initialValue = toString(node._wrapperState.initialValue);
+    const initialValue = '' + node._wrapperState.initialValue;
     const currentValue = node.value;
 
     // Do not assign value if it is already set. This prevents user text input
@@ -332,9 +332,9 @@ export function setDefaultValue(
     node.ownerDocument.activeElement !== node
   ) {
     if (value == null) {
-      node.defaultValue = toString(node._wrapperState.initialValue);
-    } else if (node.defaultValue !== toString(value)) {
-      node.defaultValue = toString(value);
+      node.defaultValue = node._wrapperState.initialValue;
+    } else if (node.defaultValue !== '' + value) {
+      node.defaultValue = value;
     }
   }
 }

From fbd16531f310129b08727942f8cf61c2ecd5211f Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:39:57 -0700
Subject: [PATCH 08/10] Remove toString usage in ReactDOMOption

---
 packages/react-dom/src/client/ReactDOMOption.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMOption.js b/packages/react-dom/src/client/ReactDOMOption.js
index 7fe61f0797aa8..0bb13bdae4fea 100644
--- a/packages/react-dom/src/client/ReactDOMOption.js
+++ b/packages/react-dom/src/client/ReactDOMOption.js
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import warning from 'shared/warning';
-import {getToStringValue, toString} from '../shared/ToStringValue';
+import {getToStringValue} from '../shared/ToStringValue';
 
 let didWarnSelectedSetOnOption = false;
 let didWarnInvalidChild = false;
@@ -81,7 +81,7 @@ export function validateProps(element: Element, props: Object) {
 export function postMountWrapper(element: Element, props: Object) {
   // value="" should make a value attribute (#6219)
   if (props.value != null) {
-    element.setAttribute('value', toString(getToStringValue(props.value)));
+    element.setAttribute('value', getToStringValue(props.value));
   }
 }
 

From 26ef90b2e27b7079951bec5ab0d0cc5d7749bbb7 Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:41:22 -0700
Subject: [PATCH 09/10] Remove toString usage from textarea

---
 .../src/__tests__/ReactDOMServerIntegrationSelect-test.js | 2 +-
 packages/react-dom/src/client/ReactDOMInput.js            | 2 +-
 packages/react-dom/src/client/ReactDOMSelect.js           | 2 +-
 packages/react-dom/src/client/ReactDOMTextarea.js         | 8 ++++----
 packages/react-dom/src/server/ReactPartialRenderer.js     | 7 ++-----
 5 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index a18e38ee92b16..50a15d068eddb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -342,7 +342,7 @@ describe('ReactDOMServerIntegrationSelect', () => {
     'multiselects the correct options even with a type mismatch',
     async render => {
       const e = await render(
-        <select multiple={true} value={[1,"3"]} readOnly={true}>
+        <select multiple={true} value={[1, '3']} readOnly={true}>
           <option>None</option>
           <option value="1">1</option>
           <option value={3}>3</option>
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 142fc9a544914..7378dd8a39219 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -185,7 +185,7 @@ export function updateWrapper(element: Element, props: Object) {
         node.value = value;
       }
     } else if (node.value !== '' + value) {
-      node.value = value
+      node.value = value;
     }
   } else if (type === 'submit' || type === 'reset') {
     // Submit/reset inputs need the attribute removed completely to avoid
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index 791a466feccaf..e8f35a7d06081 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -98,7 +98,7 @@ function updateOptions(
   } else {
     // Do not set `select.value` as exact behavior isn't consistent across all
     // browsers for all cases.
-    let selectedValue = '' + getToStringValue((propValue: any))
+    let selectedValue = '' + getToStringValue((propValue: any));
     let defaultSelected = null;
     for (let i = 0; i < options.length; i++) {
       if (options[i].value === selectedValue) {
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 34c4bfb566108..9561c45344089 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -12,7 +12,7 @@ import warning from 'shared/warning';
 
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import {getToStringValue, toString} from '../shared/ToStringValue';
+import {getToStringValue} from '../shared/ToStringValue';
 import type {ToStringValue} from '../shared/ToStringValue';
 
 let didWarnValDefaultVal = false;
@@ -56,7 +56,7 @@ export function getHostProps(element: Element, props: Object) {
     ...props,
     value: undefined,
     defaultValue: undefined,
-    children: toString(node._wrapperState.initialValue),
+    children: '' + node._wrapperState.initialValue,
   };
 
   return hostProps;
@@ -131,7 +131,7 @@ export function updateWrapper(element: Element, props: Object) {
   if (value != null) {
     // Cast `value` to a string to ensure the value is set correctly. While
     // browsers typically do this as necessary, jsdom doesn't.
-    const newValue = toString(value);
+    const newValue = '' + value;
     // To avoid side effects (such as losing text selection), only set value if changed
     if (newValue !== node.value) {
       node.value = newValue;
@@ -141,7 +141,7 @@ export function updateWrapper(element: Element, props: Object) {
     }
   }
   if (props.defaultValue != null) {
-    node.defaultValue = toString(getToStringValue(props.defaultValue));
+    node.defaultValue = getToStringValue(props.defaultValue);
   }
 }
 
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index ec7a0fb2ee516..319602e34e923 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -62,10 +62,7 @@ import warnValidStyle from '../shared/warnValidStyle';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
-import {
-  getToStringValue,
-  isSameStringValue,
-} from '../shared/ToStringValue';
+import {getToStringValue, isSameStringValue} from '../shared/ToStringValue';
 
 // Based on reading the React.Children implementation. TODO: type this somewhere?
 type ReactNode = string | number | ReactElement;
@@ -1250,7 +1247,7 @@ class ReactDOMServerRenderer {
         if (props.value != null) {
           value = getToStringValue(props.value);
         } else {
-          value = optionChildren
+          value = optionChildren;
         }
 
         selected = false;

From da338d3c4ec3cfd15b4497995259967499df3d2f Mon Sep 17 00:00:00 2001
From: Nate Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 10 Sep 2018 16:42:47 -0700
Subject: [PATCH 10/10] Remove string comparison and stringification from
 toStringValue

---
 packages/react-dom/src/shared/ToStringValue.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/react-dom/src/shared/ToStringValue.js b/packages/react-dom/src/shared/ToStringValue.js
index a719d3c574a80..854be437a87df 100644
--- a/packages/react-dom/src/shared/ToStringValue.js
+++ b/packages/react-dom/src/shared/ToStringValue.js
@@ -15,13 +15,6 @@ export opaque type ToStringValue =
   | null
   | void;
 
-// Flow does not allow string concatenation of most non-string types. To work
-// 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 {
-  return '' + (value: any);
-}
-
 export function getToStringValue(value: mixed): ToStringValue {
   switch (typeof value) {
     case 'boolean':
@@ -35,7 +28,3 @@ export function getToStringValue(value: mixed): ToStringValue {
       return '';
   }
 }
-
-export function isSameStringValue(a: mixed, b: mixed): boolean {
-  return toString(getToStringValue(a)) === toString(getToStringValue(b));
-}