From 71a692f257caca531fd2a3cb5be9ef2fe755d4c4 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 20 Mar 2023 23:18:30 -0400
Subject: [PATCH 1/5] Extract setting properties into a helper whether it's
 initial or update

---
 .../src/client/ReactDOMComponent.js           | 467 ++++++------------
 1 file changed, 158 insertions(+), 309 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index ecb08dda7d358..db56aad9af3fd 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -287,162 +287,121 @@ 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,
+  rawProps: 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 (rawProps.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;
-        }
-      // 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);
-          }
+      break;
+    }
+    case 'onScroll': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
         }
+        listenToNonDelegatedEvent('scroll', domElement);
       }
+      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;
+      }
     }
   }
 }
@@ -725,7 +684,21 @@ export function setInitialProperties(
       props = rawProps;
   }
 
-  setInitialDOMProperties(tag, domElement, props, isCustomComponentTag);
+  for (const propKey in props) {
+    if (props.hasOwnProperty(propKey)) {
+      const nextProp = props[propKey];
+      if (nextProp != null) {
+        setProp(
+          domElement,
+          tag,
+          propKey,
+          nextProp,
+          isCustomComponentTag,
+          props,
+        );
+      }
+    }
+  }
 
   switch (tag) {
     case 'input':
@@ -859,42 +832,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 +843,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);
         }
       }
@@ -1078,15 +920,22 @@ export function updateProperties(
     ReactDOMInputUpdateChecked(domElement, nextRawProps);
   }
 
-  const wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
+  // TODO: Handle wasCustomComponentTag
+  // const wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
   const isCustomComponentTag = isCustomComponent(tag, nextRawProps);
   // Apply the diff.
-  updateDOMProperties(
-    domElement,
-    updatePayload,
-    wasCustomComponentTag,
-    isCustomComponentTag,
-  );
+  for (let i = 0; i < updatePayload.length; i += 2) {
+    const propKey = updatePayload[i];
+    const propValue = updatePayload[i + 1];
+    setProp(
+      domElement,
+      tag,
+      propKey,
+      propValue,
+      isCustomComponentTag,
+      nextRawProps,
+    );
+  }
 
   // TODO: Ensure that an update gets scheduled if any of the special props
   // changed.

From d741e00964ab1542654d380ac1e2d11a17feca3d Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Wed, 22 Mar 2023 15:10:48 -0400
Subject: [PATCH 2/5] Move special cases to commit phase and inline
 getHostProps

---
 .../src/client/ReactDOMComponent.js           | 592 +++++++++++-------
 .../src/client/ReactDOMInput.js               |  39 +-
 .../src/client/ReactDOMSelect.js              |   7 -
 .../src/client/ReactDOMTextarea.js            |  31 +-
 .../__tests__/ChangeEventPlugin-test.js       |  36 ++
 5 files changed, 408 insertions(+), 297 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index db56aad9af3fd..587933653326b 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,
@@ -369,6 +368,16 @@ function setProp(
       }
       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;
+    }
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
     case 'defaultValue': // Reserved
@@ -539,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':
@@ -668,63 +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;
   }
 
+  const isCustomComponentTag = isCustomComponent(tag, props);
   for (const propKey in props) {
-    if (props.hasOwnProperty(propKey)) {
-      const nextProp = props[propKey];
-      if (nextProp != null) {
-        setProp(
-          domElement,
-          tag,
-          propKey,
-          nextProp,
-          isCustomComponentTag,
-          props,
-        );
-      }
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
     }
-  }
-
-  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 propValue = props[propKey];
+    if (propValue == null) {
+      continue;
+    }
+    setProp(domElement, tag, propKey, propValue, isCustomComponentTag, props);
   }
 }
 
@@ -732,80 +793,24 @@ 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);
+      // Schedule to ensure the commit phase happens
+      // TODO: Figure out if this is actually really necessary or if all scenarios
+      // will have changed props.
       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;
@@ -906,23 +911,153 @@ 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);
+  switch (tag) {
+    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 updating the rest of props. Otherwise HTML5 input validations
+      // raise warnings and prevent the new value from being assigned.
+      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, 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
-  // const wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
-  const isCustomComponentTag = isCustomComponent(tag, nextRawProps);
+  // 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];
@@ -933,28 +1068,9 @@ export function updateProperties(
       propKey,
       propValue,
       isCustomComponentTag,
-      nextRawProps,
+      nextProps,
     );
   }
-
-  // TODO: Ensure that an update gets scheduled if any of the special props
-  // changed.
-  switch (tag) {
-    case 'input':
-      // Update the wrapper around inputs *after* updating props. This has to
-      // happen after `updateDOMProperties`. 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':
-      // <select> value update needs to occur after <option> children
-      // reconciliation
-      ReactDOMSelectPostUpdateWrapper(domElement, nextRawProps);
-      break;
-  }
 }
 
 function getPossibleStandardName(propName: string): string | null {
diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js
index a133106cd4ab9..6abf032d8c45e 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,7 +103,6 @@ export function initWrapperState(element: Element, props: Object) {
 
   const node = ((element: any): InputWithWrapperState);
   const defaultValue = props.defaultValue == null ? '' : props.defaultValue;
-
   node._wrapperState = {
     initialChecked:
       props.checked != null ? props.checked : props.defaultChecked,
@@ -312,15 +300,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;
 

From e4aeee892f0e16c22ea01d59896f91c08923d598 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 28 Mar 2023 21:44:20 -0400
Subject: [PATCH 3/5] Ensure check is a boolean (function/symbol are false)

---
 packages/react-dom-bindings/src/client/ReactDOMInput.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js
index 6abf032d8c45e..aed75c646fa14 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMInput.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js
@@ -103,9 +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,
     ),

From 9c3ef630b41c5111aee73514faf7496e75417749 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 28 Mar 2023 22:16:08 -0400
Subject: [PATCH 4/5] Remove force commit phase

This isn't necessary because we always call "updateWrapper" after the event handling.

We can't rely on even getting here if no props have changed since we could've bailed on the props object alone before getting here.
---
 .../src/client/ReactDOMComponent.js                   | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 587933653326b..801a4e27776c5 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -802,17 +802,6 @@ export function diffProperties(
 
   let updatePayload: null | Array<any> = null;
 
-  switch (tag) {
-    case 'input':
-    case 'select':
-    case 'textarea':
-      // Schedule to ensure the commit phase happens
-      // TODO: Figure out if this is actually really necessary or if all scenarios
-      // will have changed props.
-      updatePayload = [];
-      break;
-  }
-
   let propKey;
   let styleName;
   let styleUpdates = null;

From 08de5b15c423928acc0560df8dbc8af4cf929782 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 28 Mar 2023 22:28:22 -0400
Subject: [PATCH 5/5] Unify switches when hydrating

We don't really do anything between init and post mount, other than
scheduling for later. So there's no behavior difference.
---
 .../src/client/ReactDOMComponent.js           | 103 ++++++++----------
 1 file changed, 46 insertions(+), 57 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 801a4e27776c5..c1f5ed366ae2a 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -292,7 +292,7 @@ function setProp(
   key: string,
   value: mixed,
   isCustomComponentTag: boolean,
-  rawProps: any,
+  props: any,
 ): void {
   switch (key) {
     case 'style': {
@@ -325,7 +325,7 @@ function setProp(
         }
         const nextHtml: any = value.__html;
         if (nextHtml != null) {
-          if (rawProps.children != null) {
+          if (props.children != null) {
             throw new Error(
               'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
             );
@@ -1093,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;
     }
@@ -1111,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;
     }
@@ -1184,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;
     }
@@ -1202,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;
     }
@@ -1288,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.
@@ -1337,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
@@ -1377,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,
@@ -1391,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;
@@ -1411,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,
       );
@@ -1423,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;
 }