diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 4e1ecda7857ff..4deb8943a196f 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,
@@ -15,7 +17,6 @@ import {
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
-import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 
 import {
   getValueForAttribute,
@@ -26,24 +27,27 @@ import {
   setValueForNamespacedAttribute,
 } from './DOMPropertyOperations';
 import {
-  validateInputProps,
-  initInput,
-  updateInputChecked,
-  updateInput,
-  restoreControlledInputState,
+  initWrapperState as ReactDOMInputInitWrapperState,
+  postMountWrapper as ReactDOMInputPostMountWrapper,
+  updateChecked as ReactDOMInputUpdateChecked,
+  updateWrapper as ReactDOMInputUpdateWrapper,
+  restoreControlledState as ReactDOMInputRestoreControlledState,
 } from './ReactDOMInput';
-import {initOption, validateOptionProps} from './ReactDOMOption';
 import {
-  validateSelectProps,
-  initSelect,
-  restoreControlledSelectState,
-  updateSelect,
+  postMountWrapper as ReactDOMOptionPostMountWrapper,
+  validateProps as ReactDOMOptionValidateProps,
+} from './ReactDOMOption';
+import {
+  initWrapperState as ReactDOMSelectInitWrapperState,
+  postMountWrapper as ReactDOMSelectPostMountWrapper,
+  restoreControlledState as ReactDOMSelectRestoreControlledState,
+  postUpdateWrapper as ReactDOMSelectPostUpdateWrapper,
 } from './ReactDOMSelect';
 import {
-  validateTextareaProps,
-  initTextarea,
-  updateTextarea,
-  restoreControlledTextareaState,
+  initWrapperState as ReactDOMTextareaInitWrapperState,
+  postMountWrapper as ReactDOMTextareaPostMountWrapper,
+  updateWrapper as ReactDOMTextareaUpdateWrapper,
+  restoreControlledState as ReactDOMTextareaRestoreControlledState,
 } from './ReactDOMTextarea';
 import {track} from './inputValueTracking';
 import setInnerHTML from './setInnerHTML';
@@ -75,8 +79,6 @@ import {
   listenToNonDelegatedEvent,
 } from '../events/DOMPluginEventSystem';
 
-let didWarnControlledToUncontrolled = false;
-let didWarnUncontrolledToControlled = false;
 let didWarnInvalidHydration = false;
 let canDiffStyleForHydrationWarning;
 if (__DEV__) {
@@ -803,9 +805,7 @@ export function setInitialProperties(
       break;
     }
     case 'input': {
-      if (__DEV__) {
-        checkControlledValueProps('input', props);
-      }
+      ReactDOMInputInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
@@ -834,10 +834,10 @@ export function setInitialProperties(
             break;
           }
           case 'checked': {
+            const node = ((domElement: any): InputWithWrapperState);
             const checked =
-              propValue != null ? propValue : props.defaultChecked;
-            const inputElement: HTMLInputElement = (domElement: any);
-            inputElement.checked =
+              propValue != null ? propValue : node._wrapperState.initialChecked;
+            node.checked =
               !!checked &&
               typeof checked !== 'function' &&
               checked !== 'symbol';
@@ -866,14 +866,11 @@ export function setInitialProperties(
       // 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));
-      validateInputProps(domElement, props);
-      initInput(domElement, props, false);
+      ReactDOMInputPostMountWrapper(domElement, props, false);
       return;
     }
     case 'select': {
-      if (__DEV__) {
-        checkControlledValueProps('select', props);
-      }
+      ReactDOMSelectInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
@@ -896,14 +893,11 @@ export function setInitialProperties(
           }
         }
       }
-      validateSelectProps(domElement, props);
-      initSelect(domElement, props);
+      ReactDOMSelectPostMountWrapper(domElement, props);
       return;
     }
     case 'textarea': {
-      if (__DEV__) {
-        checkControlledValueProps('textarea', props);
-      }
+      ReactDOMTextareaInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
@@ -942,12 +936,11 @@ export function setInitialProperties(
       // 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));
-      validateTextareaProps(domElement, props);
-      initTextarea(domElement, props);
+      ReactDOMTextareaPostMountWrapper(domElement, props);
       return;
     }
     case 'option': {
-      validateOptionProps(domElement, props);
+      ReactDOMOptionValidateProps(domElement, props);
       for (const propKey in props) {
         if (!props.hasOwnProperty(propKey)) {
           continue;
@@ -970,7 +963,7 @@ export function setInitialProperties(
           }
         }
       }
-      initOption(domElement, props);
+      ReactDOMOptionPostMountWrapper(domElement, props);
       return;
     }
     case 'dialog': {
@@ -1220,17 +1213,17 @@ export function updateProperties(
       // 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) {
-        updateInputChecked(domElement, nextProps);
+        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 : nextProps.defaultChecked;
-            const inputElement: HTMLInputElement = (domElement: any);
-            inputElement.checked =
+              propValue != null ? propValue : node._wrapperState.initialChecked;
+            node.checked =
               !!checked &&
               typeof checked !== 'function' &&
               checked !== 'symbol';
@@ -1256,50 +1249,10 @@ export function updateProperties(
           }
         }
       }
-
-      if (__DEV__) {
-        const wasControlled =
-          lastProps.type === 'checkbox' || lastProps.type === 'radio'
-            ? lastProps.checked != null
-            : lastProps.value != null;
-        const isControlled =
-          nextProps.type === 'checkbox' || nextProps.type === 'radio'
-            ? nextProps.checked != null
-            : nextProps.value != null;
-
-        if (
-          !wasControlled &&
-          isControlled &&
-          !didWarnUncontrolledToControlled
-        ) {
-          console.error(
-            'A component is changing an uncontrolled input to be controlled. ' +
-              'This is likely caused by the value changing from undefined to ' +
-              'a defined value, which should not happen. ' +
-              'Decide between using a controlled or uncontrolled input ' +
-              'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
-          );
-          didWarnUncontrolledToControlled = true;
-        }
-        if (
-          wasControlled &&
-          !isControlled &&
-          !didWarnControlledToUncontrolled
-        ) {
-          console.error(
-            'A component is changing a controlled input to be uncontrolled. ' +
-              'This is likely caused by the value changing from a defined to ' +
-              'undefined, which should not happen. ' +
-              'Decide between using a controlled or uncontrolled input ' +
-              'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
-          );
-          didWarnControlledToUncontrolled = true;
-        }
-      }
       // 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.
-      updateInput(domElement, nextProps);
+      ReactDOMInputUpdateWrapper(domElement, nextProps);
       return;
     }
     case 'select': {
@@ -1319,7 +1272,7 @@ export function updateProperties(
       }
       // <select> value update needs to occur after <option> children
       // reconciliation
-      updateSelect(domElement, lastProps, nextProps);
+      ReactDOMSelectPostUpdateWrapper(domElement, nextProps);
       return;
     }
     case 'textarea': {
@@ -1350,7 +1303,7 @@ export function updateProperties(
           }
         }
       }
-      updateTextarea(domElement, nextProps);
+      ReactDOMTextareaUpdateWrapper(domElement, nextProps);
       return;
     }
     case 'option': {
@@ -2310,47 +2263,38 @@ export function diffHydratedProperties(
       listenToNonDelegatedEvent('toggle', domElement);
       break;
     case 'input':
-      if (__DEV__) {
-        checkControlledValueProps('input', props);
-      }
+      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));
-      validateInputProps(domElement, props);
       // 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.
-      initInput(domElement, props, true);
+      ReactDOMInputPostMountWrapper(domElement, props, true);
       break;
     case 'option':
-      validateOptionProps(domElement, props);
+      ReactDOMOptionValidateProps(domElement, props);
       break;
     case 'select':
-      if (__DEV__) {
-        checkControlledValueProps('select', props);
-      }
+      ReactDOMSelectInitWrapperState(domElement, props);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      validateSelectProps(domElement, props);
       break;
     case 'textarea':
-      if (__DEV__) {
-        checkControlledValueProps('textarea', props);
-      }
+      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));
-      validateTextareaProps(domElement, props);
-      initTextarea(domElement, props);
+      ReactDOMTextareaPostMountWrapper(domElement, props);
       break;
   }
 
@@ -2528,13 +2472,13 @@ export function restoreControlledState(
 ): void {
   switch (tag) {
     case 'input':
-      restoreControlledInputState(domElement, props);
+      ReactDOMInputRestoreControlledState(domElement, props);
       return;
     case 'textarea':
-      restoreControlledTextareaState(domElement, props);
+      ReactDOMTextareaRestoreControlledState(domElement, props);
       return;
     case 'select':
-      restoreControlledSelectState(domElement, props);
+      ReactDOMSelectRestoreControlledState(domElement, props);
       return;
   }
 }
diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js
index fcede97885728..aed75c646fa14 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMInput.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js
@@ -12,6 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
 import {getToStringValue, toString} from './ToStringValue';
+import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {updateValueIfChanged} from './inputValueTracking';
 import getActiveElement from './getActiveElement';
 import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
@@ -19,8 +20,29 @@ import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
 
+export type InputWithWrapperState = HTMLInputElement & {
+  _wrapperState: {
+    initialValue: ToStringValue,
+    initialChecked: ?boolean,
+    controlled?: boolean,
+    ...
+  },
+  checked: boolean,
+  value: string,
+  defaultChecked: boolean,
+  defaultValue: string,
+  ...
+};
+
 let didWarnValueDefaultValue = false;
 let didWarnCheckedDefaultChecked = false;
+let didWarnControlledToUncontrolled = false;
+let didWarnUncontrolledToControlled = false;
+
+function isControlled(props: any) {
+  const usesChecked = props.type === 'checkbox' || props.type === 'radio';
+  return usesChecked ? props.checked != null : props.value != null;
+}
 
 /**
  * Implements an <input> host component that allows setting these optional
@@ -39,11 +61,10 @@ let didWarnCheckedDefaultChecked = false;
  * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
  */
 
-export function validateInputProps(element: Element, props: Object) {
+export function initWrapperState(element: Element, props: Object) {
   if (__DEV__) {
-    // Normally we check for undefined and null the same, but explicitly specifying both
-    // properties, at all is probably worth warning for. We could move this either direction
-    // and just make it ok to pass null or just check hasOwnProperty.
+    checkControlledValueProps('input', props);
+
     if (
       props.checked !== undefined &&
       props.defaultChecked !== undefined &&
@@ -79,30 +100,98 @@ export function validateInputProps(element: Element, props: Object) {
       didWarnValueDefaultValue = true;
     }
   }
+
+  const node = ((element: any): InputWithWrapperState);
+  const defaultValue = props.defaultValue == null ? '' : props.defaultValue;
+  const initialChecked =
+    props.checked != null ? props.checked : props.defaultChecked;
+  node._wrapperState = {
+    initialChecked:
+      typeof initialChecked !== 'function' &&
+      typeof initialChecked !== 'symbol' &&
+      !!initialChecked,
+    initialValue: getToStringValue(
+      props.value != null ? props.value : defaultValue,
+    ),
+    controlled: isControlled(props),
+  };
 }
 
-export function updateInputChecked(element: Element, props: Object) {
-  const node: HTMLInputElement = (element: any);
+export function updateChecked(element: Element, props: Object) {
+  const node = ((element: any): InputWithWrapperState);
   const checked = props.checked;
   if (checked != null) {
     node.checked = checked;
   }
 }
 
-export function updateInput(element: Element, props: Object) {
-  const node: HTMLInputElement = (element: any);
+export function updateWrapper(element: Element, props: Object) {
+  const node = ((element: any): InputWithWrapperState);
+  if (__DEV__) {
+    const controlled = isControlled(props);
+
+    if (
+      !node._wrapperState.controlled &&
+      controlled &&
+      !didWarnUncontrolledToControlled
+    ) {
+      console.error(
+        'A component is changing an uncontrolled input to be controlled. ' +
+          'This is likely caused by the value changing from undefined to ' +
+          'a defined value, which should not happen. ' +
+          'Decide between using a controlled or uncontrolled input ' +
+          'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
+      );
+      didWarnUncontrolledToControlled = true;
+    }
+    if (
+      node._wrapperState.controlled &&
+      !controlled &&
+      !didWarnControlledToUncontrolled
+    ) {
+      console.error(
+        'A component is changing a controlled input to be uncontrolled. ' +
+          'This is likely caused by the value changing from a defined to ' +
+          'undefined, which should not happen. ' +
+          'Decide between using a controlled or uncontrolled input ' +
+          'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
+      );
+      didWarnControlledToUncontrolled = true;
+    }
+  }
+
+  updateChecked(element, props);
 
   const value = getToStringValue(props.value);
   const type = props.type;
 
+  if (value != null) {
+    if (type === 'number') {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === '') ||
+        // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != (value: any)
+      ) {
+        node.value = toString((value: any));
+      }
+    } else if (node.value !== toString((value: any))) {
+      node.value = toString((value: any));
+    }
+  } else if (type === 'submit' || type === 'reset') {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute('value');
+    return;
+  }
+
   if (disableInputAttributeSyncing) {
     // When not syncing the value attribute, React only assigns a new value
     // whenever the defaultValue React prop has changed. When not present,
     // React does nothing
-    if (props.defaultValue != null) {
+    if (props.hasOwnProperty('defaultValue')) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
-    } else {
-      node.removeAttribute('value');
     }
   } else {
     // When syncing the value attribute, the value comes from a cascade of
@@ -110,12 +199,10 @@ export function updateInput(element: Element, props: Object) {
     //  1. The value React property
     //  2. The defaultValue React property
     //  3. Otherwise there should be no change
-    if (props.value != null) {
+    if (props.hasOwnProperty('value')) {
       setDefaultValue(node, props.type, value);
-    } else if (props.defaultValue != null) {
+    } else if (props.hasOwnProperty('defaultValue')) {
       setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
-    } else {
-      node.removeAttribute('value');
     }
   }
 
@@ -135,39 +222,18 @@ export function updateInput(element: Element, props: Object) {
       node.defaultChecked = !!props.defaultChecked;
     }
   }
-
-  updateInputChecked(element, props);
-
-  if (value != null) {
-    if (type === 'number') {
-      if (
-        // $FlowFixMe[incompatible-type]
-        (value === 0 && node.value === '') ||
-        // We explicitly want to coerce to number here if possible.
-        // eslint-disable-next-line
-        node.value != (value: any)
-      ) {
-        node.value = toString((value: any));
-      }
-    } else if (node.value !== toString((value: any))) {
-      node.value = toString((value: any));
-    }
-  } else if (type === 'submit' || type === 'reset') {
-    // Submit/reset inputs need the attribute removed completely to avoid
-    // blank-text buttons.
-    node.removeAttribute('value');
-    return;
-  }
 }
 
-export function initInput(
+export function postMountWrapper(
   element: Element,
   props: Object,
   isHydrating: boolean,
 ) {
-  const node: HTMLInputElement = (element: any);
+  const node = ((element: any): InputWithWrapperState);
 
-  if (props.value != null || props.defaultValue != null) {
+  // Do not assign value if it is already set. This prevents user text input
+  // from being lost during SSR hydration.
+  if (props.hasOwnProperty('value') || props.hasOwnProperty('defaultValue')) {
     const type = props.type;
     const isButton = type === 'submit' || type === 'reset';
 
@@ -177,14 +243,7 @@ export function initInput(
       return;
     }
 
-    const defaultValue =
-      props.defaultValue != null
-        ? toString(getToStringValue(props.defaultValue))
-        : '';
-    const initialValue =
-      props.value != null
-        ? toString(getToStringValue(props.value))
-        : defaultValue;
+    const initialValue = toString(node._wrapperState.initialValue);
 
     // Do not assign value if it is already set. This prevents user text input
     // from being lost during SSR hydration.
@@ -223,8 +282,9 @@ export function initInput(
     if (disableInputAttributeSyncing) {
       // When not syncing the value attribute, assign the value attribute
       // directly from the defaultValue React property (when present)
-      if (props.defaultValue != null) {
-        node.defaultValue = defaultValue;
+      const defaultValue = getToStringValue(props.defaultValue);
+      if (defaultValue != null) {
+        node.defaultValue = toString(defaultValue);
       }
     } else {
       // Otherwise, the value attribute is synchronized to the property,
@@ -244,27 +304,20 @@ export function initInput(
     node.name = '';
   }
 
-  const defaultChecked =
-    props.checked != null ? props.checked : props.defaultChecked;
-  const initialChecked =
-    typeof defaultChecked !== 'function' &&
-    typeof defaultChecked !== 'symbol' &&
-    !!defaultChecked;
-
   // 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 = !!initialChecked;
+    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)
-    if (props.defaultChecked != null) {
+    if (props.hasOwnProperty('defaultChecked')) {
       node.defaultChecked = !node.defaultChecked;
       node.defaultChecked = !!props.defaultChecked;
     }
@@ -276,7 +329,7 @@ export function initInput(
     //   2. The defaultChecked React property when present
     //   3. Otherwise, false
     node.defaultChecked = !node.defaultChecked;
-    node.defaultChecked = !!initialChecked;
+    node.defaultChecked = !!node._wrapperState.initialChecked;
   }
 
   if (name !== '') {
@@ -284,13 +337,13 @@ export function initInput(
   }
 }
 
-export function restoreControlledInputState(element: Element, props: Object) {
-  const node: HTMLInputElement = (element: any);
-  updateInput(node, props);
+export function restoreControlledState(element: Element, props: Object) {
+  const node = ((element: any): InputWithWrapperState);
+  updateWrapper(node, props);
   updateNamedCousins(node, props);
 }
 
-function updateNamedCousins(rootNode: HTMLInputElement, props: any) {
+function updateNamedCousins(rootNode: InputWithWrapperState, props: any) {
   const name = props.name;
   if (props.type === 'radio' && name != null) {
     let queryRoot: Element = rootNode;
@@ -338,7 +391,7 @@ function updateNamedCousins(rootNode: HTMLInputElement, props: any) {
       // If this is a controlled radio button group, forcing the input that
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.
-      updateInput(otherNode, otherProps);
+      updateWrapper(otherNode, otherProps);
     }
   }
 }
@@ -352,7 +405,7 @@ function updateNamedCousins(rootNode: HTMLInputElement, props: any) {
 //
 // https://github.com/facebook/react/issues/7253
 export function setDefaultValue(
-  node: HTMLInputElement,
+  node: InputWithWrapperState,
   type: ?string,
   value: ToStringValue,
 ) {
@@ -361,7 +414,9 @@ export function setDefaultValue(
     type !== 'number' ||
     getActiveElement(node.ownerDocument) !== node
   ) {
-    if (node.defaultValue !== toString(value)) {
+    if (value == null) {
+      node.defaultValue = toString(node._wrapperState.initialValue);
+    } else if (node.defaultValue !== toString(value)) {
       node.defaultValue = toString(value);
     }
   }
diff --git a/packages/react-dom-bindings/src/client/ReactDOMOption.js b/packages/react-dom-bindings/src/client/ReactDOMOption.js
index 7907609ad88fe..f3b8f12a7f16a 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMOption.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMOption.js
@@ -18,7 +18,7 @@ let didWarnInvalidInnerHTML = false;
  * Implements an <option> host component that warns when `selected` is set.
  */
 
-export function validateOptionProps(element: Element, props: Object) {
+export function validateProps(element: Element, props: Object) {
   if (__DEV__) {
     // If a value is not provided, then the children must be simple.
     if (props.value == null) {
@@ -60,7 +60,7 @@ export function validateOptionProps(element: Element, props: Object) {
   }
 }
 
-export function initOption(element: Element, props: Object) {
+export function postMountWrapper(element: Element, props: Object) {
   // value="" should make a value attribute (#6219)
   if (props.value != null) {
     element.setAttribute('value', toString(getToStringValue(props.value)));
diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js
index 13f7a8e6ad11a..a0a5a16c058e6 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js
@@ -10,6 +10,7 @@
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 
+import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
 import isArray from 'shared/isArray';
 
@@ -19,6 +20,10 @@ if (__DEV__) {
   didWarnValueDefaultValue = false;
 }
 
+type SelectWithWrapperState = HTMLSelectElement & {
+  _wrapperState: {wasMultiple: boolean},
+};
+
 function getDeclarationErrorAddendum() {
   const ownerName = getCurrentFiberOwnerNameInDevOrNull();
   if (ownerName) {
@@ -34,6 +39,8 @@ const valuePropNames = ['value', 'defaultValue'];
  */
 function checkSelectPropTypes(props: any) {
   if (__DEV__) {
+    checkControlledValueProps('select', props);
+
     for (let i = 0; i < valuePropNames.length; i++) {
       const propName = valuePropNames[i];
       if (props[propName] == null) {
@@ -122,9 +129,17 @@ function updateOptions(
  * selected.
  */
 
-export function validateSelectProps(element: Element, props: Object) {
+export function initWrapperState(element: Element, props: Object) {
+  const node = ((element: any): SelectWithWrapperState);
   if (__DEV__) {
     checkSelectPropTypes(props);
+  }
+
+  node._wrapperState = {
+    wasMultiple: !!props.multiple,
+  };
+
+  if (__DEV__) {
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -142,8 +157,8 @@ export function validateSelectProps(element: Element, props: Object) {
   }
 }
 
-export function initSelect(element: Element, props: Object) {
-  const node: HTMLSelectElement = (element: any);
+export function postMountWrapper(element: Element, props: Object) {
+  const node = ((element: any): SelectWithWrapperState);
   node.multiple = !!props.multiple;
   const value = props.value;
   if (value != null) {
@@ -153,13 +168,10 @@ export function initSelect(element: Element, props: Object) {
   }
 }
 
-export function updateSelect(
-  element: Element,
-  prevProps: Object,
-  props: Object,
-) {
-  const node: HTMLSelectElement = (element: any);
-  const wasMultiple = !!prevProps.multiple;
+export function postUpdateWrapper(element: Element, props: Object) {
+  const node = ((element: any): SelectWithWrapperState);
+  const wasMultiple = node._wrapperState.wasMultiple;
+  node._wrapperState.wasMultiple = !!props.multiple;
 
   const value = props.value;
   if (value != null) {
@@ -175,8 +187,8 @@ export function updateSelect(
   }
 }
 
-export function restoreControlledSelectState(element: Element, props: Object) {
-  const node: HTMLSelectElement = (element: any);
+export function restoreControlledState(element: Element, props: Object) {
+  const node = ((element: any): SelectWithWrapperState);
   const value = props.value;
 
   if (value != null) {
diff --git a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
index 544cee9952be9..2a76fc7fe057f 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
@@ -9,12 +9,18 @@
 
 import isArray from 'shared/isArray';
 
+import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import {getToStringValue, toString} from './ToStringValue';
+import type {ToStringValue} from './ToStringValue';
 import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
 
+export type TextAreaWithWrapperState = HTMLTextAreaElement & {
+  _wrapperState: {initialValue: ToStringValue},
+};
+
 /**
  * Implements a <textarea> host component that allows setting `value`, and
  * `defaultValue`. This differs from the traditional DOM API because value is
@@ -31,8 +37,10 @@ let didWarnValDefaultVal = false;
  * `defaultValue` if specified, or the children content (deprecated).
  */
 
-export function validateTextareaProps(element: Element, props: Object) {
+export function initWrapperState(element: Element, props: Object) {
+  const node = ((element: any): TextAreaWithWrapperState);
   if (__DEV__) {
+    checkControlledValueProps('textarea', props);
     if (
       props.value !== undefined &&
       props.defaultValue !== undefined &&
@@ -49,41 +57,7 @@ export function validateTextareaProps(element: Element, props: Object) {
       );
       didWarnValDefaultVal = true;
     }
-    if (props.children != null && props.value == null) {
-      console.error(
-        'Use the `defaultValue` or `value` props instead of setting ' +
-          'children on <textarea>.',
-      );
-    }
-  }
-}
-
-export function updateTextarea(element: Element, props: Object) {
-  const node: HTMLTextAreaElement = (element: any);
-  const value = getToStringValue(props.value);
-  const defaultValue = getToStringValue(props.defaultValue);
-  if (defaultValue != null) {
-    node.defaultValue = toString(defaultValue);
-  } else {
-    node.defaultValue = '';
-  }
-  if (value != null) {
-    // Cast `value` to a string to ensure the value is set correctly. While
-    // browsers typically do this as necessary, jsdom doesn't.
-    const newValue = toString(value);
-    // To avoid side effects (such as losing text selection), only set value if changed
-    if (newValue !== node.value) {
-      node.value = newValue;
-    }
-    // TOOO: This should respect disableInputAttributeSyncing flag.
-    if (props.defaultValue == null && node.defaultValue !== newValue) {
-      node.defaultValue = newValue;
-    }
   }
-}
-
-export function initTextarea(element: Element, props: Object) {
-  const node: HTMLTextAreaElement = (element: any);
 
   let initialValue = props.value;
 
@@ -91,6 +65,12 @@ export function initTextarea(element: Element, props: Object) {
   if (initialValue == null) {
     let {children, defaultValue} = props;
     if (children != null) {
+      if (__DEV__) {
+        console.error(
+          'Use the `defaultValue` or `value` props instead of setting ' +
+            'children on <textarea>.',
+        );
+      }
       if (!disableTextareaChildren) {
         if (defaultValue != null) {
           throw new Error(
@@ -117,7 +97,34 @@ export function initTextarea(element: Element, props: Object) {
 
   const stringValue = getToStringValue(initialValue);
   node.defaultValue = (stringValue: any); // This will be toString:ed.
+  node._wrapperState = {
+    initialValue: stringValue,
+  };
+}
+
+export function updateWrapper(element: Element, props: Object) {
+  const node = ((element: any): TextAreaWithWrapperState);
+  const value = getToStringValue(props.value);
+  const defaultValue = getToStringValue(props.defaultValue);
+  if (value != null) {
+    // Cast `value` to a string to ensure the value is set correctly. While
+    // browsers typically do this as necessary, jsdom doesn't.
+    const newValue = toString(value);
+    // To avoid side effects (such as losing text selection), only set value if changed
+    if (newValue !== node.value) {
+      node.value = newValue;
+    }
+    if (props.defaultValue == null && node.defaultValue !== newValue) {
+      node.defaultValue = newValue;
+    }
+  }
+  if (defaultValue != null) {
+    node.defaultValue = toString(defaultValue);
+  }
+}
 
+export function postMountWrapper(element: Element, props: Object) {
+  const node = ((element: any): TextAreaWithWrapperState);
   // This is in postMount because we need access to the DOM node, which is not
   // available until after the component has mounted.
   const textContent = node.textContent;
@@ -126,17 +133,14 @@ export function initTextarea(element: Element, props: Object) {
   // initial value. In IE10/IE11 there is a bug where the placeholder attribute
   // will populate textContent as well.
   // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
-  if (textContent === stringValue) {
+  if (textContent === node._wrapperState.initialValue) {
     if (textContent !== '' && textContent !== null) {
       node.value = textContent;
     }
   }
 }
 
-export function restoreControlledTextareaState(
-  element: Element,
-  props: Object,
-) {
+export function restoreControlledState(element: Element, props: Object) {
   // DOM component is still mounted; update
-  updateTextarea(element, props);
+  updateWrapper(element, props);
 }
diff --git a/packages/react-dom-bindings/src/client/inputValueTracking.js b/packages/react-dom-bindings/src/client/inputValueTracking.js
index 5e1ca58687817..a2ad273a67d1c 100644
--- a/packages/react-dom-bindings/src/client/inputValueTracking.js
+++ b/packages/react-dom-bindings/src/client/inputValueTracking.js
@@ -123,6 +123,7 @@ export function track(node: ElementWithValueTracker) {
     return;
   }
 
+  // TODO: Once it's just Fiber we can move this to node._wrapperState
   node._valueTracker = trackValueOnNode(node);
 }
 
diff --git a/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
index fddc501013519..baa33f1a7c5c6 100644
--- a/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
+++ b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
@@ -263,17 +263,16 @@ function getTargetInstForInputOrChangeEvent(
   }
 }
 
-function handleControlledInputBlur(node: HTMLInputElement, props: any) {
-  if (node.type !== 'number') {
+function handleControlledInputBlur(node: HTMLInputElement) {
+  const state = (node: any)._wrapperState;
+
+  if (!state || !state.controlled || node.type !== 'number') {
     return;
   }
 
   if (!disableInputAttributeSyncing) {
-    const isControlled = props.value != null;
-    if (isControlled) {
-      // If controlled, assign the value attribute to the current value on blur
-      setDefaultValue((node: any), 'number', (node: any).value);
-    }
+    // If controlled, assign the value attribute to the current value on blur
+    setDefaultValue((node: any), 'number', (node: any).value);
   }
 }
 
@@ -336,12 +335,8 @@ function extractEvents(
   }
 
   // When blurring, set the value attribute for number inputs
-  if (domEventName === 'focusout' && targetInst) {
-    // These props aren't necessarily the most current but we warn for changing
-    // between controlled and uncontrolled, so it doesn't matter and the previous
-    // code was also broken for changes.
-    const props = targetInst.memoizedProps;
-    handleControlledInputBlur(((targetNode: any): HTMLInputElement), props);
+  if (domEventName === 'focusout') {
+    handleControlledInputBlur(((targetNode: any): HTMLInputElement));
   }
 }
 
diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index 67d6f7bd465ab..bf523c4494e81 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -1166,7 +1166,11 @@ describe('DOMPropertyOperations', () => {
       ).toErrorDev(
         'A component is changing a controlled input to be uncontrolled',
       );
-      expect(container.firstChild.hasAttribute('value')).toBe(false);
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('foo');
+      }
       expect(container.firstChild.value).toBe('foo');
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index b8c91fb86e18b..f373af9335ea1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1083,17 +1083,10 @@ describe('ReactDOMComponent', () => {
       );
       expect(nodeValueSetter).toHaveBeenCalledTimes(1);
 
-      expect(() => {
-        ReactDOM.render(
-          <input type="checkbox" onChange={onChange} checked={false} />,
-          container,
-        );
-      }).toErrorDev(
-        ' A component is changing an uncontrolled input to be controlled. This is likely caused by ' +
-          'the value changing from undefined to a defined value, which should not happen. Decide between ' +
-          'using a controlled or uncontrolled input element for the lifetime of the component.',
+      ReactDOM.render(
+        <input type="checkbox" onChange={onChange} checked={false} />,
+        container,
       );
-
       // TODO: Non-null values are updated twice on inputs. This is should ideally be fixed.
       expect(nodeValueSetter).toHaveBeenCalledTimes(3);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 47fca9522fac8..64ee09f09abe1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -1952,7 +1952,11 @@ describe('ReactDOMInput', () => {
       expect(renderInputWithStringThenWithUndefined).toErrorDev(
         'A component is changing a controlled input to be uncontrolled.',
       );
-      expect(input.getAttribute('value')).toBe(null);
+      if (disableInputAttributeSyncing) {
+        expect(input.getAttribute('value')).toBe(null);
+      } else {
+        expect(input.getAttribute('value')).toBe('first');
+      }
     });
 
     it('preserves the value property', () => {
@@ -1998,7 +2002,11 @@ describe('ReactDOMInput', () => {
           'or `undefined` for uncontrolled components.',
         'A component is changing a controlled input to be uncontrolled.',
       ]);
-      expect(input.hasAttribute('value')).toBe(false);
+      if (disableInputAttributeSyncing) {
+        expect(input.hasAttribute('value')).toBe(false);
+      } else {
+        expect(input.getAttribute('value')).toBe('first');
+      }
     });
 
     it('preserves the value property', () => {
@@ -2157,30 +2165,4 @@ describe('ReactDOMInput', () => {
       expect(node.hasAttribute('value')).toBe(false);
     });
   });
-
-  it('should remove previous `defaultValue`', () => {
-    const node = ReactDOM.render(
-      <input type="text" defaultValue="0" />,
-      container,
-    );
-
-    expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
-
-    ReactDOM.render(<input type="text" />, container);
-    expect(node.defaultValue).toBe('');
-  });
-
-  it('should treat `defaultValue={null}` as missing', () => {
-    const node = ReactDOM.render(
-      <input type="text" defaultValue="0" />,
-      container,
-    );
-
-    expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
-
-    ReactDOM.render(<input type="text" defaultValue={null} />, container);
-    expect(node.defaultValue).toBe('');
-  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 396eef8d6d34e..c926224afbc02 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -736,26 +736,4 @@ describe('ReactDOMTextarea', () => {
       expect(node.value).toBe('foo');
     });
   });
-
-  it('should remove previous `defaultValue`', () => {
-    const container = document.createElement('div');
-    const node = ReactDOM.render(<textarea defaultValue="0" />, container);
-
-    expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
-
-    ReactDOM.render(<textarea />, container);
-    expect(node.defaultValue).toBe('');
-  });
-
-  it('should treat `defaultValue={null}` as missing', () => {
-    const container = document.createElement('div');
-    const node = ReactDOM.render(<textarea defaultValue="0" />, container);
-
-    expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
-
-    ReactDOM.render(<textarea defaultValue={null} />, container);
-    expect(node.defaultValue).toBe('');
-  });
 });