Eliminate unnecessary numeric equality checks (#11751)

* Eliminate unnecessary numeric equality checks

This commit changes the way numeric equality for number inputs works
such that it compares against `input.valueAsNumber`. This eliminates
quite a bit of branching around numeric equality.

* There is no need to compare valueAsNumber

* Add test cases for empty string to 0.

* Avoid implicit boolean JSX props

* Split up numeric equality test to isolate eslint disable command

* Fix typo in ReactDOMInput test

Author: nhunzaker

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

@@ -248,6 +248,23 @@ describe('ReactDOMInput', () => {
     }
   });
 
+  it('performs a state change from "" to 0', () => {
+    class Stub extends React.Component {
+      state = {
+        value: '',
+      };
+      render() {
+        return <input type="number" value={this.state.value} readOnly={true} />;
+      }
+    }
+
+    var stub = ReactTestUtils.renderIntoDocument(<Stub />);
+    var node = ReactDOM.findDOMNode(stub);
+    stub.setState({value: 0});
+
+    expect(node.value).toEqual('0');
+  });
+
   it('distinguishes precision for extra zeroes in string number values', () => {
     spyOnDev(console, 'error');
     class Stub extends React.Component {
@@ -595,6 +612,7 @@ describe('ReactDOMInput', () => {
     var node = container.firstChild;
 
     expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
   });
 
   it('should properly transition from 0 to an empty value', function() {
@@ -606,6 +624,43 @@ describe('ReactDOMInput', () => {
     var node = container.firstChild;
 
     expect(node.value).toBe('');
+    expect(node.defaultValue).toBe('');
+  });
+
+  it('should properly transition a text input from 0 to an empty 0.0', function() {
+    var container = document.createElement('div');
+
+    ReactDOM.render(<input type="text" value={0} />, container);
+    ReactDOM.render(<input type="text" value="0.0" />, container);
+
+    var node = container.firstChild;
+
+    expect(node.value).toBe('0.0');
+    expect(node.defaultValue).toBe('0.0');
+  });
+
+  it('should properly transition a number input from "" to 0', function() {
+    var container = document.createElement('div');
+
+    ReactDOM.render(<input type="number" value="" />, container);
+    ReactDOM.render(<input type="number" value={0} />, container);
+
+    var node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
+  });
+
+  it('should properly transition a number input from "" to "0"', function() {
+    var container = document.createElement('div');
+
+    ReactDOM.render(<input type="number" value="" />, container);
+    ReactDOM.render(<input type="number" value="0" />, container);
+
+    var node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
   });
 
   it('should have the correct target value', () => {

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

@@ -181,18 +181,11 @@ export function updateWrapper(element: Element, props: Object) {
   var value = getSafeValue(props.value);
 
   if (value != null) {
-    if (value === 0 && node.value === '') {
-      node.value = '0';
-      // Note: IE9 reports a number inputs as 'text', so check props instead.
-    } else if (props.type === 'number') {
-      // Simulate `input.valueAsNumber`. IE9 does not support it
-      var valueAsNumber = parseFloat(node.value) || 0;
-
+    if (props.type === 'number') {
       if (
+        (value === 0 && node.value === '') ||
         // eslint-disable-next-line
-        value != valueAsNumber ||
-        // eslint-disable-next-line
-        (value == valueAsNumber && node.value != value)
+        node.value != value
       ) {
         node.value = '' + value;
       }