From 85de6fde515148babd36eae2b7384ad8e62b732a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 28 Mar 2023 22:40:03 -0400
Subject: [PATCH] Refactor DOM special cases per tags including controlled
 fields (#26501)

I use a shared helper when setting properties into a helper whether it's
initial or update.

I moved the special cases per tag to commit phase so we can check it
only once. This also effectively inlines getHostProps which can be done
in a single check per prop key.

The diffProperties operation is simplified to mostly just generating a
plain diff of all properties, generating an update payload. This might
generate a few more entries that are now ignored in the commit phase.
that previously would've been ignored earlier. We could skip this and
just do the whole diff in the commit phase by always scheduling a commit
phase update.

I tested the attribute table (one change documented below) and a few
select DOM fixtures.
---
 .../src/client/ReactDOMComponent.js           | 1123 ++++++++---------
 .../src/client/ReactDOMInput.js               |   45 +-
 .../src/client/ReactDOMSelect.js              |    7 -
 .../src/client/ReactDOMTextarea.js            |   31 +-
 .../__tests__/ChangeEventPlugin-test.js       |   36 +
 5 files changed, 592 insertions(+), 650 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index ecb08dda7d358..c1f5ed366ae2a 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {InputWithWrapperState} from './ReactDOMInput';
+
 import {
   registrationNameDependencies,
   possibleRegistrationNames,
@@ -25,7 +27,6 @@ import {
 } from './DOMPropertyOperations';
 import {
   initWrapperState as ReactDOMInputInitWrapperState,
-  getHostProps as ReactDOMInputGetHostProps,
   postMountWrapper as ReactDOMInputPostMountWrapper,
   updateChecked as ReactDOMInputUpdateChecked,
   updateWrapper as ReactDOMInputUpdateWrapper,
@@ -37,14 +38,12 @@ import {
 } from './ReactDOMOption';
 import {
   initWrapperState as ReactDOMSelectInitWrapperState,
-  getHostProps as ReactDOMSelectGetHostProps,
   postMountWrapper as ReactDOMSelectPostMountWrapper,
   restoreControlledState as ReactDOMSelectRestoreControlledState,
   postUpdateWrapper as ReactDOMSelectPostUpdateWrapper,
 } from './ReactDOMSelect';
 import {
   initWrapperState as ReactDOMTextareaInitWrapperState,
-  getHostProps as ReactDOMTextareaGetHostProps,
   postMountWrapper as ReactDOMTextareaPostMountWrapper,
   updateWrapper as ReactDOMTextareaUpdateWrapper,
   restoreControlledState as ReactDOMTextareaRestoreControlledState,
@@ -287,162 +286,131 @@ export function trapClickOnNonInteractiveElement(node: HTMLElement) {
   node.onclick = noop;
 }
 
-function setInitialDOMProperties(
-  tag: string,
+function setProp(
   domElement: Element,
-  nextProps: Object,
+  tag: string,
+  key: string,
+  value: mixed,
   isCustomComponentTag: boolean,
+  props: any,
 ): void {
-  for (const propKey in nextProps) {
-    if (!nextProps.hasOwnProperty(propKey)) {
-      continue;
+  switch (key) {
+    case 'style': {
+      if (value != null && typeof value !== 'object') {
+        throw new Error(
+          'The `style` prop expects a mapping from style properties to values, ' +
+            "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+            'using JSX.',
+        );
+      }
+      if (__DEV__) {
+        if (value) {
+          // Freeze the next style object so that we can assume it won't be
+          // mutated. We have already warned for this in the past.
+          Object.freeze(value);
+        }
+      }
+      // Relies on `updateStylesByID` not mutating `styleUpdates`.
+      setValueForStyles(domElement, value);
+      break;
     }
-    const nextProp = nextProps[propKey];
-    switch (propKey) {
-      case 'style': {
-        if (nextProp != null && typeof nextProp !== 'object') {
+    case 'dangerouslySetInnerHTML': {
+      if (value != null) {
+        if (typeof value !== 'object' || !('__html' in value)) {
           throw new Error(
-            'The `style` prop expects a mapping from style properties to values, ' +
-              "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-              'using JSX.',
+            '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+              'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+              'for more information.',
           );
         }
-        if (__DEV__) {
-          if (nextProp) {
-            // Freeze the next style object so that we can assume it won't be
-            // mutated. We have already warned for this in the past.
-            Object.freeze(nextProp);
-          }
-        }
-        // Relies on `updateStylesByID` not mutating `styleUpdates`.
-        setValueForStyles(domElement, nextProp);
-        break;
-      }
-      case 'dangerouslySetInnerHTML': {
-        if (nextProp != null) {
-          if (typeof nextProp !== 'object' || !('__html' in nextProp)) {
+        const nextHtml: any = value.__html;
+        if (nextHtml != null) {
+          if (props.children != null) {
             throw new Error(
-              '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-                'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-                'for more information.',
+              'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
             );
           }
-          const nextHtml = nextProp.__html;
-          if (nextHtml != null) {
-            if (nextProps.children != null) {
-              throw new Error(
-                'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-              );
-            }
-            if (disableIEWorkarounds) {
-              domElement.innerHTML = nextHtml;
-            } else {
-              setInnerHTML(domElement, nextHtml);
-            }
+          if (disableIEWorkarounds) {
+            domElement.innerHTML = nextHtml;
+          } else {
+            setInnerHTML(domElement, nextHtml);
           }
         }
-        break;
       }
-      case 'children': {
-        if (typeof nextProp === 'string') {
-          // Avoid setting initial textContent when the text is empty. In IE11 setting
-          // textContent on a <textarea> will cause the placeholder to not
-          // show within the <textarea> until it has been focused and blurred again.
-          // https://github.com/facebook/react/issues/6731#issuecomment-254874553
-          const canSetTextContent =
-            (!enableHostSingletons || tag !== 'body') &&
-            (tag !== 'textarea' || nextProp !== '');
-          if (canSetTextContent) {
-            setTextContent(domElement, nextProp);
-          }
-        } else if (typeof nextProp === 'number') {
-          const canSetTextContent = !enableHostSingletons || tag !== 'body';
-          if (canSetTextContent) {
-            setTextContent(domElement, '' + nextProp);
-          }
+      break;
+    }
+    case 'children': {
+      if (typeof value === 'string') {
+        // Avoid setting initial textContent when the text is empty. In IE11 setting
+        // textContent on a <textarea> will cause the placeholder to not
+        // show within the <textarea> until it has been focused and blurred again.
+        // https://github.com/facebook/react/issues/6731#issuecomment-254874553
+        const canSetTextContent =
+          (!enableHostSingletons || tag !== 'body') &&
+          (tag !== 'textarea' || value !== '');
+        if (canSetTextContent) {
+          setTextContent(domElement, value);
         }
-        break;
-      }
-      case 'onScroll': {
-        if (nextProp != null) {
-          if (__DEV__ && typeof nextProp !== 'function') {
-            warnForInvalidEventListener(propKey, nextProp);
-          }
-          listenToNonDelegatedEvent('scroll', domElement);
+      } else if (typeof value === 'number') {
+        const canSetTextContent = !enableHostSingletons || tag !== 'body';
+        if (canSetTextContent) {
+          setTextContent(domElement, '' + value);
         }
-        break;
       }
-      case 'suppressContentEditableWarning':
-      case 'suppressHydrationWarning':
-      case 'defaultValue': // Reserved
-      case 'defaultChecked':
-      case 'innerHTML': {
-        // Noop
-        break;
-      }
-      case 'autoFocus': {
-        // We polyfill it separately on the client during commit.
-        // We could have excluded it in the property list instead of
-        // adding a special case here, but then it wouldn't be emitted
-        // on server rendering (but we *do* want to emit it in SSR).
-        break;
-      }
-      case 'innerText': // Properties
-      case 'textContent':
-        if (enableCustomElementPropertySupport) {
-          break;
+      break;
+    }
+    case 'onScroll': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
         }
-      // eslint-disable-next-line no-fallthrough
-      default: {
-        if (registrationNameDependencies.hasOwnProperty(propKey)) {
-          if (nextProp != null) {
-            if (__DEV__ && typeof nextProp !== 'function') {
-              warnForInvalidEventListener(propKey, nextProp);
-            }
-          }
-        } else if (nextProp != null) {
-          if (isCustomComponentTag) {
-            setValueForPropertyOnCustomComponent(domElement, propKey, nextProp);
-          } else {
-            setValueForProperty(domElement, propKey, nextProp);
-          }
+        listenToNonDelegatedEvent('scroll', domElement);
+      }
+      break;
+    }
+    case 'onClick': {
+      // TODO: This cast may not be sound for SVG, MathML or custom elements.
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
         }
+        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
       }
+      break;
     }
-  }
-}
-
-function updateDOMProperties(
-  domElement: Element,
-  updatePayload: Array<any>,
-  wasCustomComponentTag: boolean,
-  isCustomComponentTag: boolean,
-): void {
-  // TODO: Handle wasCustomComponentTag
-  for (let i = 0; i < updatePayload.length; i += 2) {
-    const propKey = updatePayload[i];
-    const propValue = updatePayload[i + 1];
-    switch (propKey) {
-      case 'style':
-        setValueForStyles(domElement, propValue);
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'defaultValue': // Reserved
+    case 'defaultChecked':
+    case 'innerHTML': {
+      // Noop
+      break;
+    }
+    case 'autoFocus': {
+      // We polyfill it separately on the client during commit.
+      // We could have excluded it in the property list instead of
+      // adding a special case here, but then it wouldn't be emitted
+      // on server rendering (but we *do* want to emit it in SSR).
+      break;
+    }
+    case 'innerText': // Properties
+    case 'textContent':
+      if (enableCustomElementPropertySupport) {
         break;
-      case 'dangerouslySetInnerHTML':
-        if (disableIEWorkarounds) {
-          domElement.innerHTML = propValue;
-        } else {
-          setInnerHTML(domElement, propValue);
+      }
+    // eslint-disable-next-line no-fallthrough
+    default: {
+      if (registrationNameDependencies.hasOwnProperty(key)) {
+        if (__DEV__ && value != null && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
         }
-        break;
-      case 'children':
-        setTextContent(domElement, propValue);
-        break;
-      default:
+      } else {
         if (isCustomComponentTag) {
-          setValueForPropertyOnCustomComponent(domElement, propKey, propValue);
+          setValueForPropertyOnCustomComponent(domElement, key, value);
         } else {
-          setValueForProperty(domElement, propKey, propValue);
+          setValueForProperty(domElement, key, value);
         }
-        break;
+      }
     }
   }
 }
@@ -580,124 +548,194 @@ export function createTextNode(
 export function setInitialProperties(
   domElement: Element,
   tag: string,
-  rawProps: Object,
+  props: Object,
 ): void {
-  const isCustomComponentTag = isCustomComponent(tag, rawProps);
   if (__DEV__) {
-    validatePropertiesInDevelopment(tag, rawProps);
+    validatePropertiesInDevelopment(tag, props);
   }
 
   // TODO: Make sure that we check isMounted before firing any of these events.
-  let props: Object;
+
   switch (tag) {
-    case 'dialog':
+    case 'input': {
+      ReactDOMInputInitWrapperState(domElement, props);
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'checked': {
+            const node = ((domElement: any): InputWithWrapperState);
+            const checked =
+              propValue != null ? propValue : node._wrapperState.initialChecked;
+            node.checked =
+              !!checked &&
+              typeof checked !== 'function' &&
+              checked !== 'symbol';
+            break;
+          }
+          case 'value': {
+            // This is handled by updateWrapper below.
+            break;
+          }
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              throw new Error(
+                `${tag} is a void element tag and must neither have \`children\` nor ` +
+                  'use `dangerouslySetInnerHTML`.',
+              );
+            }
+            break;
+          }
+          // defaultChecked and defaultValue are ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, false, props);
+          }
+        }
+      }
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      track((domElement: any));
+      ReactDOMInputPostMountWrapper(domElement, props, false);
+      return;
+    }
+    case 'select': {
+      ReactDOMSelectInitWrapperState(domElement, props);
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'value': {
+            // This is handled by updateWrapper below.
+            break;
+          }
+          // defaultValue are ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, false, props);
+          }
+        }
+      }
+      ReactDOMSelectPostMountWrapper(domElement, props);
+      return;
+    }
+    case 'textarea': {
+      ReactDOMTextareaInitWrapperState(domElement, props);
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'value': {
+            // This is handled by updateWrapper below.
+            break;
+          }
+          case 'children': {
+            // TODO: Handled by initWrapperState above.
+            break;
+          }
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              // TODO: Do we really need a special error message for this. It's also pretty blunt.
+              throw new Error(
+                '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+              );
+            }
+            break;
+          }
+          // defaultValue is ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, false, props);
+          }
+        }
+      }
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      track((domElement: any));
+      ReactDOMTextareaPostMountWrapper(domElement, props);
+      return;
+    }
+    case 'option': {
+      ReactDOMOptionValidateProps(domElement, props);
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        setProp(domElement, tag, propKey, propValue, false, props);
+      }
+      ReactDOMOptionPostMountWrapper(domElement, props);
+      return;
+    }
+    case 'dialog': {
       listenToNonDelegatedEvent('cancel', domElement);
       listenToNonDelegatedEvent('close', domElement);
-      props = rawProps;
       break;
-    case 'embed':
-      if (
-        rawProps.children != null ||
-        rawProps.dangerouslySetInnerHTML != null
-      ) {
-        // TODO: Can we make this a DEV warning to avoid this deny list?
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
-      }
-    // eslint-disable-next-line no-fallthrough
+    }
     case 'iframe':
-    case 'object':
+    case 'object': {
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the load event.
       listenToNonDelegatedEvent('load', domElement);
-      props = rawProps;
       break;
+    }
     case 'video':
-    case 'audio':
+    case 'audio': {
       // We listen to these events in case to ensure emulated bubble
       // listeners still fire for all the media events.
       for (let i = 0; i < mediaEventTypes.length; i++) {
         listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
       }
-      props = rawProps;
       break;
-    case 'source':
-      if (
-        rawProps.children != null ||
-        rawProps.dangerouslySetInnerHTML != null
-      ) {
-        // TODO: Can we make this a DEV warning to avoid this deny list?
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
-      }
-      // We listen to this event in case to ensure emulated bubble
-      // listeners still fire for the error event.
-      listenToNonDelegatedEvent('error', domElement);
-      props = rawProps;
-      break;
-    case 'img':
-    case 'link':
-      if (
-        rawProps.children != null ||
-        rawProps.dangerouslySetInnerHTML != null
-      ) {
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
-      }
-    // eslint-disable-next-line no-fallthrough
-    case 'image':
+    }
+    case 'image': {
       // We listen to these events in case to ensure emulated bubble
       // listeners still fire for error and load events.
       listenToNonDelegatedEvent('error', domElement);
       listenToNonDelegatedEvent('load', domElement);
-      props = rawProps;
       break;
-    case 'details':
+    }
+    case 'details': {
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the toggle event.
       listenToNonDelegatedEvent('toggle', domElement);
-      props = rawProps;
-      break;
-    case 'input':
-      if (
-        rawProps.children != null ||
-        rawProps.dangerouslySetInnerHTML != null
-      ) {
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
-      }
-      ReactDOMInputInitWrapperState(domElement, rawProps);
-      props = ReactDOMInputGetHostProps(domElement, rawProps);
-      // We listen to this event in case to ensure emulated bubble
-      // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent('invalid', domElement);
-      break;
-    case 'option':
-      ReactDOMOptionValidateProps(domElement, rawProps);
-      props = rawProps;
-      break;
-    case 'select':
-      ReactDOMSelectInitWrapperState(domElement, rawProps);
-      props = ReactDOMSelectGetHostProps(domElement, rawProps);
-      // We listen to this event in case to ensure emulated bubble
-      // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent('invalid', domElement);
-      break;
-    case 'textarea':
-      ReactDOMTextareaInitWrapperState(domElement, rawProps);
-      props = ReactDOMTextareaGetHostProps(domElement, rawProps);
-      // We listen to this event in case to ensure emulated bubble
-      // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent('invalid', domElement);
       break;
+    }
+    case 'embed':
+    case 'source':
+    case 'img':
+    case 'link': {
+      // These are void elements that also need delegated events.
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
+      // We fallthrough to the return of the void elements
+    }
+    // eslint-disable-next-line no-fallthrough
     case 'area':
     case 'base':
     case 'br':
@@ -709,49 +747,45 @@ export function setInitialProperties(
     case 'track':
     case 'wbr':
     case 'menuitem': {
-      if (
-        rawProps.children != null ||
-        rawProps.dangerouslySetInnerHTML != null
-      ) {
-        // TODO: Can we make this a DEV warning to avoid this deny list?
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
+      // Void elements
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            // TODO: Can we make this a DEV warning to avoid this deny list?
+            throw new Error(
+              `${tag} is a void element tag and must neither have \`children\` nor ` +
+                'use `dangerouslySetInnerHTML`.',
+            );
+          }
+          // defaultChecked and defaultValue are ignored by setProp
+          default: {
+            // TODO: If the `is` prop is specified, this should go through the isCustomComponentTag flow.
+            setProp(domElement, tag, propKey, propValue, false, props);
+          }
+        }
       }
+      return;
     }
-    // eslint-disable-next-line no-fallthrough
-    default:
-      props = rawProps;
   }
 
-  setInitialDOMProperties(tag, domElement, props, isCustomComponentTag);
-
-  switch (tag) {
-    case 'input':
-      // TODO: Make sure we check if this is still unmounted or do any clean
-      // up necessary since we never stop tracking anymore.
-      track((domElement: any));
-      ReactDOMInputPostMountWrapper(domElement, rawProps, false);
-      break;
-    case 'textarea':
-      // TODO: Make sure we check if this is still unmounted or do any clean
-      // up necessary since we never stop tracking anymore.
-      track((domElement: any));
-      ReactDOMTextareaPostMountWrapper(domElement, rawProps);
-      break;
-    case 'option':
-      ReactDOMOptionPostMountWrapper(domElement, rawProps);
-      break;
-    case 'select':
-      ReactDOMSelectPostMountWrapper(domElement, rawProps);
-      break;
-    default:
-      if (typeof props.onClick === 'function') {
-        // TODO: This cast may not be sound for SVG, MathML or custom elements.
-        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
-      }
-      break;
+  const isCustomComponentTag = isCustomComponent(tag, props);
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
+    }
+    const propValue = props[propKey];
+    if (propValue == null) {
+      continue;
+    }
+    setProp(domElement, tag, propKey, propValue, isCustomComponentTag, props);
   }
 }
 
@@ -759,82 +793,15 @@ export function setInitialProperties(
 export function diffProperties(
   domElement: Element,
   tag: string,
-  lastRawProps: Object,
-  nextRawProps: Object,
+  lastProps: Object,
+  nextProps: Object,
 ): null | Array<mixed> {
   if (__DEV__) {
-    validatePropertiesInDevelopment(tag, nextRawProps);
+    validatePropertiesInDevelopment(tag, nextProps);
   }
 
   let updatePayload: null | Array<any> = null;
 
-  let lastProps: Object;
-  let nextProps: Object;
-  switch (tag) {
-    case 'input':
-      if (
-        nextRawProps.children != null ||
-        nextRawProps.dangerouslySetInnerHTML != null
-      ) {
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
-      }
-      lastProps = ReactDOMInputGetHostProps(domElement, lastRawProps);
-      nextProps = ReactDOMInputGetHostProps(domElement, nextRawProps);
-      updatePayload = [];
-      break;
-    case 'select':
-      lastProps = ReactDOMSelectGetHostProps(domElement, lastRawProps);
-      nextProps = ReactDOMSelectGetHostProps(domElement, nextRawProps);
-      updatePayload = [];
-      break;
-    case 'textarea':
-      lastProps = ReactDOMTextareaGetHostProps(domElement, lastRawProps);
-      nextProps = ReactDOMTextareaGetHostProps(domElement, nextRawProps);
-      updatePayload = [];
-      break;
-    case 'img':
-    case 'link':
-    case 'area':
-    case 'base':
-    case 'br':
-    case 'col':
-    case 'embed':
-    case 'hr':
-    case 'keygen':
-    case 'meta':
-    case 'param':
-    case 'source':
-    case 'track':
-    case 'wbr':
-    case 'menuitem': {
-      if (
-        nextRawProps.children != null ||
-        nextRawProps.dangerouslySetInnerHTML != null
-      ) {
-        // TODO: Can we make this a DEV warning to avoid this deny list?
-        throw new Error(
-          `${tag} is a void element tag and must neither have \`children\` nor ` +
-            'use `dangerouslySetInnerHTML`.',
-        );
-      }
-    }
-    // eslint-disable-next-line no-fallthrough
-    default:
-      lastProps = lastRawProps;
-      nextProps = nextRawProps;
-      if (
-        typeof lastProps.onClick !== 'function' &&
-        typeof nextProps.onClick === 'function'
-      ) {
-        // TODO: This cast may not be sound for SVG, MathML or custom elements.
-        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
-      }
-      break;
-  }
-
   let propKey;
   let styleName;
   let styleUpdates = null;
@@ -859,42 +826,10 @@ export function diffProperties(
         }
         break;
       }
-      case 'dangerouslySetInnerHTML':
-      case 'children': {
-        // Noop. This is handled by the clear text mechanism.
-        break;
-      }
-      case 'suppressContentEditableWarning':
-      case 'suppressHydrationWarning':
-      case 'defaultValue': // Reserved
-      case 'defaultChecked':
-      case 'innerHTML': {
-        // Noop
-        break;
-      }
-      case 'autoFocus': {
-        // Noop. It doesn't work on updates anyway.
-        break;
-      }
-      case 'innerText': // Properties
-      case 'textContent':
-        if (enableCustomElementPropertySupport) {
-          break;
-        }
-      // eslint-disable-next-line no-fallthrough
       default: {
-        if (registrationNameDependencies.hasOwnProperty(propKey)) {
-          // This is a special case. If any listener updates we need to ensure
-          // that the "current" fiber pointer gets updated so we need a commit
-          // to update this element.
-          if (!updatePayload) {
-            updatePayload = [];
-          }
-        } else {
-          // For all other deleted properties we add it to the queue. We use
-          // the allowed property list in the commit phase instead.
-          (updatePayload = updatePayload || []).push(propKey, null);
-        }
+        // For all other deleted properties we add it to the queue. We use
+        // the allowed property list in the commit phase instead.
+        (updatePayload = updatePayload || []).push(propKey, null);
       }
     }
   }
@@ -902,149 +837,50 @@ export function diffProperties(
     const nextProp = nextProps[propKey];
     const lastProp = lastProps != null ? lastProps[propKey] : undefined;
     if (
-      !nextProps.hasOwnProperty(propKey) ||
-      nextProp === lastProp ||
-      (nextProp == null && lastProp == null)
+      nextProps.hasOwnProperty(propKey) &&
+      nextProp !== lastProp &&
+      (nextProp != null || lastProp != null)
     ) {
-      continue;
-    }
-    switch (propKey) {
-      case 'style': {
-        if (nextProp != null && typeof nextProp !== 'object') {
-          throw new Error(
-            'The `style` prop expects a mapping from style properties to values, ' +
-              "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-              'using JSX.',
-          );
-        }
-        if (__DEV__) {
-          if (nextProp) {
-            // Freeze the next style object so that we can assume it won't be
-            // mutated. We have already warned for this in the past.
-            Object.freeze(nextProp);
-          }
-        }
-        if (lastProp) {
-          // Unset styles on `lastProp` but not on `nextProp`.
-          for (styleName in lastProp) {
-            if (
-              lastProp.hasOwnProperty(styleName) &&
-              (!nextProp || !nextProp.hasOwnProperty(styleName))
-            ) {
-              if (!styleUpdates) {
-                styleUpdates = ({}: {[string]: string});
+      switch (propKey) {
+        case 'style': {
+          if (lastProp) {
+            // Unset styles on `lastProp` but not on `nextProp`.
+            for (styleName in lastProp) {
+              if (
+                lastProp.hasOwnProperty(styleName) &&
+                (!nextProp || !nextProp.hasOwnProperty(styleName))
+              ) {
+                if (!styleUpdates) {
+                  styleUpdates = ({}: {[string]: string});
+                }
+                styleUpdates[styleName] = '';
               }
-              styleUpdates[styleName] = '';
             }
-          }
-          // Update styles that changed since `lastProp`.
-          for (styleName in nextProp) {
-            if (
-              nextProp.hasOwnProperty(styleName) &&
-              lastProp[styleName] !== nextProp[styleName]
-            ) {
-              if (!styleUpdates) {
-                styleUpdates = ({}: {[string]: $FlowFixMe});
+            // Update styles that changed since `lastProp`.
+            for (styleName in nextProp) {
+              if (
+                nextProp.hasOwnProperty(styleName) &&
+                lastProp[styleName] !== nextProp[styleName]
+              ) {
+                if (!styleUpdates) {
+                  styleUpdates = ({}: {[string]: $FlowFixMe});
+                }
+                styleUpdates[styleName] = nextProp[styleName];
               }
-              styleUpdates[styleName] = nextProp[styleName];
             }
-          }
-        } else {
-          // Relies on `updateStylesByID` not mutating `styleUpdates`.
-          if (!styleUpdates) {
-            if (!updatePayload) {
-              updatePayload = [];
-            }
-            updatePayload.push(propKey, styleUpdates);
-          }
-          styleUpdates = nextProp;
-        }
-        break;
-      }
-      case 'dangerouslySetInnerHTML': {
-        if (nextProp != null) {
-          if (typeof nextProp !== 'object' || !('__html' in nextProp)) {
-            throw new Error(
-              '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-                'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-                'for more information.',
-            );
-          }
-          const nextHtml = nextProp.__html;
-          if (nextHtml != null) {
-            if (nextProps.children != null) {
-              throw new Error(
-                'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-              );
-            }
-            const lastHtml = lastProp ? lastProp.__html : undefined;
-            if (lastHtml !== nextHtml) {
-              (updatePayload = updatePayload || []).push(propKey, nextHtml);
+          } else {
+            // Relies on `updateStylesByID` not mutating `styleUpdates`.
+            if (!styleUpdates) {
+              if (!updatePayload) {
+                updatePayload = [];
+              }
+              updatePayload.push(propKey, styleUpdates);
             }
+            styleUpdates = nextProp;
           }
-        } else {
-          // TODO: It might be too late to clear this if we have children
-          // inserted already.
-        }
-        break;
-      }
-      case 'children': {
-        if (typeof nextProp === 'string' || typeof nextProp === 'number') {
-          (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
-        }
-        break;
-      }
-      case 'onScroll': {
-        if (nextProp != null) {
-          // We eagerly listen to this even though we haven't committed yet.
-          if (__DEV__ && typeof nextProp !== 'function') {
-            warnForInvalidEventListener(propKey, nextProp);
-          }
-          listenToNonDelegatedEvent('scroll', domElement);
-        }
-        if (!updatePayload && lastProp !== nextProp) {
-          // This is a special case. If any listener updates we need to ensure
-          // that the "current" props pointer gets updated so we need a commit
-          // to update this element.
-          updatePayload = [];
-        }
-        break;
-      }
-      case 'suppressContentEditableWarning':
-      case 'suppressHydrationWarning':
-      case 'defaultValue': // Reserved
-      case 'defaultChecked':
-      case 'innerHTML': {
-        // Noop
-        break;
-      }
-      case 'autoFocus': {
-        // Noop on updates
-        break;
-      }
-      case 'innerText': // Properties
-      case 'textContent':
-        if (enableCustomElementPropertySupport) {
           break;
         }
-      // eslint-disable-next-line no-fallthrough
-      default: {
-        if (registrationNameDependencies.hasOwnProperty(propKey)) {
-          if (nextProp != null) {
-            // We eagerly listen to this even though we haven't committed yet.
-            if (__DEV__ && typeof nextProp !== 'function') {
-              warnForInvalidEventListener(propKey, nextProp);
-            }
-          }
-          if (!updatePayload && lastProp !== nextProp) {
-            // This is a special case. If any listener updates we need to ensure
-            // that the "current" props pointer gets updated so we need a commit
-            // to update this element.
-            updatePayload = [];
-          }
-        } else {
-          // For any other property we always add it to the queue and then we
-          // filter it out using the allowed property list during the commit.
+        default: {
           (updatePayload = updatePayload || []).push(propKey, nextProp);
         }
       }
@@ -1064,47 +900,165 @@ export function updateProperties(
   domElement: Element,
   updatePayload: Array<any>,
   tag: string,
-  lastRawProps: Object,
-  nextRawProps: Object,
+  lastProps: Object,
+  nextProps: Object,
 ): void {
-  // Update checked *before* name.
-  // In the middle of an update, it is possible to have multiple checked.
-  // When a checked radio tries to change name, browser makes another radio's checked false.
-  if (
-    tag === 'input' &&
-    nextRawProps.type === 'radio' &&
-    nextRawProps.name != null
-  ) {
-    ReactDOMInputUpdateChecked(domElement, nextRawProps);
-  }
-
-  const wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
-  const isCustomComponentTag = isCustomComponent(tag, nextRawProps);
-  // Apply the diff.
-  updateDOMProperties(
-    domElement,
-    updatePayload,
-    wasCustomComponentTag,
-    isCustomComponentTag,
-  );
-
-  // TODO: Ensure that an update gets scheduled if any of the special props
-  // changed.
   switch (tag) {
-    case 'input':
+    case 'input': {
+      // Update checked *before* name.
+      // In the middle of an update, it is possible to have multiple checked.
+      // When a checked radio tries to change name, browser makes another radio's checked false.
+      if (nextProps.type === 'radio' && nextProps.name != null) {
+        ReactDOMInputUpdateChecked(domElement, nextProps);
+      }
+      for (let i = 0; i < updatePayload.length; i += 2) {
+        const propKey = updatePayload[i];
+        const propValue = updatePayload[i + 1];
+        switch (propKey) {
+          case 'checked': {
+            const node = ((domElement: any): InputWithWrapperState);
+            const checked =
+              propValue != null ? propValue : node._wrapperState.initialChecked;
+            node.checked =
+              !!checked &&
+              typeof checked !== 'function' &&
+              checked !== 'symbol';
+            break;
+          }
+          case 'value': {
+            // This is handled by updateWrapper below.
+            break;
+          }
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              throw new Error(
+                `${tag} is a void element tag and must neither have \`children\` nor ` +
+                  'use `dangerouslySetInnerHTML`.',
+              );
+            }
+            break;
+          }
+          // defaultChecked and defaultValue are ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, false, nextProps);
+          }
+        }
+      }
       // Update the wrapper around inputs *after* updating props. This has to
-      // happen after `updateDOMProperties`. Otherwise HTML5 input validations
+      // happen after updating the rest of props. Otherwise HTML5 input validations
       // raise warnings and prevent the new value from being assigned.
-      ReactDOMInputUpdateWrapper(domElement, nextRawProps);
-      break;
-    case 'textarea':
-      ReactDOMTextareaUpdateWrapper(domElement, nextRawProps);
-      break;
-    case 'select':
+      ReactDOMInputUpdateWrapper(domElement, nextProps);
+      return;
+    }
+    case 'select': {
+      for (let i = 0; i < updatePayload.length; i += 2) {
+        const propKey = updatePayload[i];
+        const propValue = updatePayload[i + 1];
+        switch (propKey) {
+          case 'value': {
+            // This is handled by updateWrapper below.
+            break;
+          }
+          // defaultValue are ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, false, nextProps);
+          }
+        }
+      }
       // <select> value update needs to occur after <option> children
       // reconciliation
-      ReactDOMSelectPostUpdateWrapper(domElement, nextRawProps);
-      break;
+      ReactDOMSelectPostUpdateWrapper(domElement, nextProps);
+      return;
+    }
+    case 'textarea': {
+      for (let i = 0; i < updatePayload.length; i += 2) {
+        const propKey = updatePayload[i];
+        const propValue = updatePayload[i + 1];
+        switch (propKey) {
+          case 'value': {
+            // This is handled by updateWrapper below.
+            break;
+          }
+          case 'children': {
+            // TODO: This doesn't actually do anything if it updates.
+            break;
+          }
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              // TODO: Do we really need a special error message for this. It's also pretty blunt.
+              throw new Error(
+                '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+              );
+            }
+            break;
+          }
+          // defaultValue is ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, false, nextProps);
+          }
+        }
+      }
+      ReactDOMTextareaUpdateWrapper(domElement, nextProps);
+      return;
+    }
+    case 'img':
+    case 'link':
+    case 'area':
+    case 'base':
+    case 'br':
+    case 'col':
+    case 'embed':
+    case 'hr':
+    case 'keygen':
+    case 'meta':
+    case 'param':
+    case 'source':
+    case 'track':
+    case 'wbr':
+    case 'menuitem': {
+      // Void elements
+      for (let i = 0; i < updatePayload.length; i += 2) {
+        const propKey = updatePayload[i];
+        const propValue = updatePayload[i + 1];
+        switch (propKey) {
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              // TODO: Can we make this a DEV warning to avoid this deny list?
+              throw new Error(
+                `${tag} is a void element tag and must neither have \`children\` nor ` +
+                  'use `dangerouslySetInnerHTML`.',
+              );
+            }
+            break;
+          }
+          // defaultChecked and defaultValue are ignored by setProp
+          default: {
+            // TODO: If the `is` prop is specified, this should go through the isCustomComponentTag flow.
+            setProp(domElement, tag, propKey, propValue, false, nextProps);
+          }
+        }
+      }
+      return;
+    }
+  }
+
+  // TODO: Handle wasCustomComponentTag. Changing "is" isn't valid.
+  // const wasCustomComponentTag = isCustomComponent(tag, lastProps);
+  const isCustomComponentTag = isCustomComponent(tag, nextProps);
+  // Apply the diff.
+  for (let i = 0; i < updatePayload.length; i += 2) {
+    const propKey = updatePayload[i];
+    const propValue = updatePayload[i + 1];
+    setProp(
+      domElement,
+      tag,
+      propKey,
+      propValue,
+      isCustomComponentTag,
+      nextProps,
+    );
   }
 }
 
@@ -1139,15 +1093,15 @@ function diffHydratedStyles(domElement: Element, value: mixed) {
 function diffHydratedCustomComponent(
   domElement: Element,
   tag: string,
-  rawProps: Object,
+  props: Object,
   parentNamespaceDev: string,
   extraAttributeNames: Set<string>,
 ) {
-  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 (nextProp == null) {
       continue;
     }
@@ -1157,7 +1111,7 @@ function diffHydratedCustomComponent(
       }
       continue;
     }
-    if (rawProps.suppressHydrationWarning === true) {
+    if (props.suppressHydrationWarning === true) {
       // Don't bother comparing. We're ignoring all these warnings.
       continue;
     }
@@ -1230,15 +1184,15 @@ function diffHydratedCustomComponent(
 function diffHydratedGenericElement(
   domElement: Element,
   tag: string,
-  rawProps: Object,
+  props: Object,
   parentNamespaceDev: string,
   extraAttributeNames: Set<string>,
 ) {
-  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 (nextProp == null) {
       continue;
     }
@@ -1248,7 +1202,7 @@ function diffHydratedGenericElement(
       }
       continue;
     }
-    if (rawProps.suppressHydrationWarning === true) {
+    if (props.suppressHydrationWarning === true) {
       // Don't bother comparing. We're ignoring all these warnings.
       continue;
     }
@@ -1334,13 +1288,13 @@ function diffHydratedGenericElement(
 export function diffHydratedProperties(
   domElement: Element,
   tag: string,
-  rawProps: Object,
+  props: Object,
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
   parentNamespaceDev: string,
 ): null | Array<mixed> {
   if (__DEV__) {
-    validatePropertiesInDevelopment(tag, rawProps);
+    validatePropertiesInDevelopment(tag, props);
   }
 
   // TODO: Make sure that we check isMounted before firing any of these events.
@@ -1383,35 +1337,44 @@ export function diffHydratedProperties(
       listenToNonDelegatedEvent('toggle', domElement);
       break;
     case 'input':
-      ReactDOMInputInitWrapperState(domElement, rawProps);
+      ReactDOMInputInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      track((domElement: any));
+      // For input and textarea we current always set the value property at
+      // post mount to force it to diverge from attributes. However, for
+      // option and select we don't quite do the same thing and select
+      // is not resilient to the DOM state changing so we don't do that here.
+      // TODO: Consider not doing this for input and textarea.
+      ReactDOMInputPostMountWrapper(domElement, props, true);
       break;
     case 'option':
-      ReactDOMOptionValidateProps(domElement, rawProps);
+      ReactDOMOptionValidateProps(domElement, props);
       break;
     case 'select':
-      ReactDOMSelectInitWrapperState(domElement, rawProps);
+      ReactDOMSelectInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
       break;
     case 'textarea':
-      ReactDOMTextareaInitWrapperState(domElement, rawProps);
+      ReactDOMTextareaInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      track((domElement: any));
+      ReactDOMTextareaPostMountWrapper(domElement, props);
       break;
   }
 
-  if (rawProps.hasOwnProperty('onScroll')) {
-    listenToNonDelegatedEvent('scroll', domElement);
-  }
-
   let updatePayload = null;
 
-  const children = rawProps.children;
+  const children = props.children;
   // For text content children we compare against textContent. This
   // might match additional HTML that is hidden when we read it using
   // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
@@ -1423,7 +1386,7 @@ export function diffHydratedProperties(
   // TODO: Should we use domElement.firstChild.nodeValue to compare?
   if (typeof children === 'string' || typeof children === 'number') {
     if (domElement.textContent !== '' + children) {
-      if (rawProps.suppressHydrationWarning !== true) {
+      if (props.suppressHydrationWarning !== true) {
         checkForUnmatchedText(
           domElement.textContent,
           children,
@@ -1437,6 +1400,15 @@ export function diffHydratedProperties(
     }
   }
 
+  if (props.onScroll != null) {
+    listenToNonDelegatedEvent('scroll', domElement);
+  }
+
+  if (props.onClick != null) {
+    // TODO: This cast may not be sound for SVG, MathML or custom elements.
+    trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
+  }
+
   if (__DEV__ && shouldWarnDev) {
     const extraAttributeNames: Set<string> = new Set();
     const attributes = domElement.attributes;
@@ -1457,11 +1429,11 @@ export function diffHydratedProperties(
           extraAttributeNames.add(attributes[i].name);
       }
     }
-    if (isCustomComponent(tag, rawProps)) {
+    if (isCustomComponent(tag, props)) {
       diffHydratedCustomComponent(
         domElement,
         tag,
-        rawProps,
+        props,
         parentNamespaceDev,
         extraAttributeNames,
       );
@@ -1469,48 +1441,19 @@ export function diffHydratedProperties(
       diffHydratedGenericElement(
         domElement,
         tag,
-        rawProps,
+        props,
         parentNamespaceDev,
         extraAttributeNames,
       );
     }
     if (
       extraAttributeNames.size > 0 &&
-      rawProps.suppressHydrationWarning !== true
+      props.suppressHydrationWarning !== true
     ) {
       warnForExtraAttributes(extraAttributeNames);
     }
   }
 
-  switch (tag) {
-    case 'input':
-      // TODO: Make sure we check if this is still unmounted or do any clean
-      // up necessary since we never stop tracking anymore.
-      track((domElement: any));
-      ReactDOMInputPostMountWrapper(domElement, rawProps, true);
-      break;
-    case 'textarea':
-      // TODO: Make sure we check if this is still unmounted or do any clean
-      // up necessary since we never stop tracking anymore.
-      track((domElement: any));
-      ReactDOMTextareaPostMountWrapper(domElement, rawProps);
-      break;
-    case 'select':
-    case 'option':
-      // For input and textarea we current always set the value property at
-      // post mount to force it to diverge from attributes. However, for
-      // option and select we don't quite do the same thing and select
-      // is not resilient to the DOM state changing so we don't do that here.
-      // TODO: Consider not doing this for input and textarea.
-      break;
-    default:
-      if (typeof rawProps.onClick === 'function') {
-        // TODO: This cast may not be sound for SVG, MathML or custom elements.
-        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
-      }
-      break;
-  }
-
   return updatePayload;
 }
 
diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js
index a133106cd4ab9..aed75c646fa14 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMInput.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js
@@ -15,19 +15,22 @@ import {getToStringValue, toString} from './ToStringValue';
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {updateValueIfChanged} from './inputValueTracking';
 import getActiveElement from './getActiveElement';
-import assign from 'shared/assign';
 import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
 
-type InputWithWrapperState = HTMLInputElement & {
+export type InputWithWrapperState = HTMLInputElement & {
   _wrapperState: {
     initialValue: ToStringValue,
     initialChecked: ?boolean,
     controlled?: boolean,
     ...
   },
+  checked: boolean,
+  value: string,
+  defaultChecked: boolean,
+  defaultValue: string,
   ...
 };
 
@@ -58,20 +61,6 @@ function isControlled(props: any) {
  * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
 
-export function getHostProps(element: Element, props: Object): Object {
-  const node = ((element: any): InputWithWrapperState);
-  const checked = props.checked;
-
-  const hostProps = assign({}, props, {
-    defaultChecked: undefined,
-    defaultValue: undefined,
-    value: undefined,
-    checked: checked != null ? checked : node._wrapperState.initialChecked,
-  });
-
-  return hostProps;
-}
-
 export function initWrapperState(element: Element, props: Object) {
   if (__DEV__) {
     checkControlledValueProps('input', props);
@@ -114,10 +103,13 @@ export function initWrapperState(element: Element, props: Object) {
 
   const node = ((element: any): InputWithWrapperState);
   const defaultValue = props.defaultValue == null ? '' : props.defaultValue;
-
+  const initialChecked =
+    props.checked != null ? props.checked : props.defaultChecked;
   node._wrapperState = {
     initialChecked:
-      props.checked != null ? props.checked : props.defaultChecked,
+      typeof initialChecked !== 'function' &&
+      typeof initialChecked !== 'symbol' &&
+      !!initialChecked,
     initialValue: getToStringValue(
       props.value != null ? props.value : defaultValue,
     ),
@@ -312,15 +304,16 @@ export function postMountWrapper(
     node.name = '';
   }
 
-  if (disableInputAttributeSyncing) {
-    // When not syncing the checked attribute, the checked property
-    // never gets assigned. It must be manually set. We don't want
-    // to do this when hydrating so that existing user input isn't
-    // modified
-    if (!isHydrating) {
-      updateChecked(element, props);
-    }
+  // The checked property never gets assigned. It must be manually set.
+  // We don't want to do this when hydrating so that existing user input isn't
+  // modified
+  // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
+  // correct for the hydration case then.
+  if (!isHydrating) {
+    node.checked = !!node._wrapperState.initialChecked;
+  }
 
+  if (disableInputAttributeSyncing) {
     // Only assign the checked attribute if it is defined. This saves
     // a DOM write when controlling the checked attribute isn't needed
     // (text inputs, submit/reset)
diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js
index ebf94c7b79fa3..a0a5a16c058e6 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js
@@ -12,7 +12,6 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
-import assign from 'shared/assign';
 import isArray from 'shared/isArray';
 
 let didWarnValueDefaultValue;
@@ -130,12 +129,6 @@ function updateOptions(
  * selected.
  */
 
-export function getHostProps(element: Element, props: Object): Object {
-  return assign({}, props, {
-    value: undefined,
-  });
-}
-
 export function initWrapperState(element: Element, props: Object) {
   const node = ((element: any): SelectWithWrapperState);
   if (__DEV__) {
diff --git a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
index d687ff44c17ec..2a76fc7fe057f 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
@@ -17,7 +17,7 @@ import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
 
-type TextAreaWithWrapperState = HTMLTextAreaElement & {
+export type TextAreaWithWrapperState = HTMLTextAreaElement & {
   _wrapperState: {initialValue: ToStringValue},
 };
 
@@ -37,31 +37,6 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & {
  * `defaultValue` if specified, or the children content (deprecated).
  */
 
-export function getHostProps(element: Element, props: Object): Object {
-  const node = ((element: any): TextAreaWithWrapperState);
-
-  if (props.dangerouslySetInnerHTML != null) {
-    throw new Error(
-      '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
-    );
-  }
-
-  // Always set children to the same thing. In IE9, the selection range will
-  // get reset if `textContent` is mutated.  We could add a check in setTextContent
-  // to only set the value if/when the value differs from the node value (which would
-  // completely solve this IE9 bug), but Sebastian+Sophie seemed to like this
-  // solution. The value can be a boolean or object so that's why it's forced
-  // to be a string.
-  const hostProps = {
-    ...props,
-    value: undefined,
-    defaultValue: undefined,
-    children: toString(node._wrapperState.initialValue),
-  };
-
-  return hostProps;
-}
-
 export function initWrapperState(element: Element, props: Object) {
   const node = ((element: any): TextAreaWithWrapperState);
   if (__DEV__) {
@@ -120,8 +95,10 @@ export function initWrapperState(element: Element, props: Object) {
     initialValue = defaultValue;
   }
 
+  const stringValue = getToStringValue(initialValue);
+  node.defaultValue = (stringValue: any); // This will be toString:ed.
   node._wrapperState = {
-    initialValue: getToStringValue(initialValue),
+    initialValue: stringValue,
   };
 }
 
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 104aed13d761f..f4f75bfd52233 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -133,6 +133,42 @@ describe('ChangeEventPlugin', () => {
     }
   });
 
+  it('should not invoke a change event for textarea same value', () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const node = ReactDOM.render(
+      <textarea onChange={cb} defaultValue="initial" />,
+      container,
+    );
+    node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should not invoke a change event for textarea same value (capture)', () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const node = ReactDOM.render(
+      <textarea onChangeCapture={cb} defaultValue="initial" />,
+      container,
+    );
+    node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
   it('should consider initial checkbox checked=true to be current', () => {
     let called = 0;