Track the initial expected value during hydration

hydrateInput/Select/Textarea is like initInput/Select/Textarea except we
don't actually set any defaultValue or value or name etc. we assume that
they're what we expected just like any attribute hydration in prod.

If the value has changed by the time we commit, we should track the value
that we last observed. Any new value should trigger an onChange so the
initial tracked value should be what the server rendered which we assume
was the same thing we got from the hydrating props.

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -66,6 +66,7 @@ import sanitizeURL from '../shared/sanitizeURL';
 import {trackHostMutation} from 'react-reconciler/src/ReactFiberMutationTracking';
 
 import {
+  enableHydrationChangeEvent,
   enableScrollEndPolyfill,
   enableSrcObject,
   enableTrustedTypesIntegration,
@@ -3097,16 +3098,18 @@ export function hydrateProperties(
       // 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.value,
-        props.defaultValue,
-        props.checked,
-        props.defaultChecked,
-        props.type,
-        props.name,
-        true,
-      );
+      if (!enableHydrationChangeEvent) {
+        initInput(
+          domElement,
+          props.value,
+          props.defaultValue,
+          props.checked,
+          props.defaultChecked,
+          props.type,
+          props.name,
+          true,
+        );
+      }
       break;
     case 'option':
       validateOptionProps(domElement, props);
@@ -3130,7 +3133,14 @@ export function hydrateProperties(
       // TODO: Make sure we check if this is still unmounted or do any clean
       // up necessary since we never stop tracking anymore.
       validateTextareaProps(domElement, props);
-      initTextarea(domElement, props.value, props.defaultValue, props.children);
+      if (!enableHydrationChangeEvent) {
+        initTextarea(
+          domElement,
+          props.value,
+          props.defaultValue,
+          props.children,
+        );
+      }
       break;
   }
 

packages/react-dom-bindings/src/client/ReactDOMInput.js

@@ -12,9 +12,12 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
 import {getToStringValue, toString} from './ToStringValue';
-import {track, updateValueIfChanged} from './inputValueTracking';
+import {track, trackHydrated, updateValueIfChanged} from './inputValueTracking';
 import getActiveElement from './getActiveElement';
-import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
+import {
+  disableInputAttributeSyncing,
+  enableHydrationChangeEvent,
+} from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
@@ -241,7 +244,7 @@ export function initInput(
 
     // Do not assign value if it is already set. This prevents user text input
     // from being lost during SSR hydration.
-    if (!isHydrating) {
+    if (!isHydrating || enableHydrationChangeEvent) {
       if (disableInputAttributeSyncing) {
         // When not syncing the value attribute, the value property points
         // directly to the React prop. Only assign it if it exists.
@@ -299,7 +302,7 @@ export function initInput(
     typeof checkedOrDefault !== 'symbol' &&
     !!checkedOrDefault;
 
-  if (isHydrating) {
+  if (isHydrating && !enableHydrationChangeEvent) {
     // Detach .checked from .defaultChecked but leave user input alone
     node.checked = node.checked;
   } else {
@@ -340,6 +343,39 @@ export function initInput(
   track((element: any));
 }
 
+export function hydrateInput(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  checked: ?boolean,
+  defaultChecked: ?boolean,
+): void {
+  const node: HTMLInputElement = (element: any);
+
+  const defaultValueStr =
+    defaultValue != null ? toString(getToStringValue(defaultValue)) : '';
+  const initialValue =
+    value != null ? toString(getToStringValue(value)) : defaultValueStr;
+
+  const checkedOrDefault = checked != null ? checked : defaultChecked;
+  // TODO: This 'function' or 'symbol' check isn't replicated in other places
+  // so this semantic is inconsistent.
+  const initialChecked =
+    typeof checkedOrDefault !== 'function' &&
+    typeof checkedOrDefault !== 'symbol' &&
+    !!checkedOrDefault;
+
+  // Detach .checked from .defaultChecked but leave user input alone
+  node.checked = node.checked;
+
+  const changed = trackHydrated((node: any), initialValue, initialChecked);
+  if (changed) {
+    // If the current value is different, that suggests that the user
+    // changed it before hydration.
+    // TODO: Queue replay.
+  }
+}
+
 export function restoreControlledInputState(element: Element, props: Object) {
   const rootNode: HTMLInputElement = (element: any);
   updateInput(

packages/react-dom-bindings/src/client/ReactDOMSelect.js

@@ -86,7 +86,7 @@ function updateOptions(
   } else {
     // Do not set `select.value` as exact behavior isn't consistent across all
     // browsers for all cases.
-    const selectedValue = toString(getToStringValue((propValue: any)));
+    const selectedValue = toString(getToStringValue(propValue));
     let defaultSelected = null;
     for (let i = 0; i < options.length; i++) {
       if (options[i].value === selectedValue) {
@@ -157,6 +157,59 @@ export function initSelect(
   }
 }
 
+export function hydrateSelect(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  multiple: ?boolean,
+): void {
+  const node: HTMLSelectElement = (element: any);
+  const options: HTMLOptionsCollection = node.options;
+
+  const propValue: any = value != null ? value : defaultValue;
+
+  let changed = false;
+
+  if (multiple) {
+    const selectedValues = (propValue: ?Array<string>);
+    const selectedValue: {[string]: boolean} = {};
+    if (selectedValues != null) {
+      for (let i = 0; i < selectedValues.length; i++) {
+        // Prefix to avoid chaos with special keys.
+        selectedValue['$' + selectedValues[i]] = true;
+      }
+    }
+    for (let i = 0; i < options.length; i++) {
+      const expectedSelected = selectedValue.hasOwnProperty(
+        '$' + options[i].value,
+      );
+      if (options[i].selected !== expectedSelected) {
+        changed = true;
+        break;
+      }
+    }
+  } else {
+    let selectedValue =
+      propValue == null ? null : toString(getToStringValue(propValue));
+    for (let i = 0; i < options.length; i++) {
+      if (selectedValue == null && !options[i].disabled) {
+        // We expect the first non-disabled option to be selected if the selected is null.
+        selectedValue = options[i].value;
+      }
+      const expectedSelected = options[i].value === selectedValue;
+      if (options[i].selected !== expectedSelected) {
+        changed = true;
+        break;
+      }
+    }
+  }
+  if (changed) {
+    // If the current selection is different than our initial that suggests that the user
+    // changed it before hydration.
+    // TODO: Queue replay.
+  }
+}
+
 export function updateSelect(
   element: Element,
   value: ?string,

packages/react-dom-bindings/src/client/ReactDOMTextarea.js

@@ -13,7 +13,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 import {getToStringValue, toString} from './ToStringValue';
 import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
-import {track} from './inputValueTracking';
+import {track, trackHydrated} from './inputValueTracking';
 
 let didWarnValDefaultVal = false;
 
@@ -146,6 +146,31 @@ export function initTextarea(
   track((element: any));
 }
 
+export function hydrateTextarea(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+): void {
+  const node: HTMLTextAreaElement = (element: any);
+  let initialValue = value;
+  if (initialValue == null) {
+    if (defaultValue == null) {
+      defaultValue = '';
+    }
+    initialValue = defaultValue;
+  }
+  // Track the value that we last observed which is the hydrated value so
+  // that any change event that fires will trigger onChange on the actual
+  // current value.
+  const stringValue = toString(getToStringValue(initialValue));
+  const changed = trackHydrated((node: any), stringValue, false);
+  if (changed) {
+    // If the current value is different, that suggests that the user
+    // changed it before hydration.
+    // TODO: Queue replay.
+  }
+}
+
 export function restoreControlledTextareaState(
   element: Element,
   props: Object,

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -75,6 +75,9 @@ import {
   diffHydratedText,
   trapClickOnNonInteractiveElement,
 } from './ReactDOMComponent';
+import {hydrateInput} from './ReactDOMInput';
+import {hydrateTextarea} from './ReactDOMTextarea';
+import {hydrateSelect} from './ReactDOMSelect';
 import {getSelectionInformation, restoreSelection} from './ReactInputSelection';
 import setTextContent from './setTextContent';
 import {
@@ -155,6 +158,10 @@ export type Props = {
   top?: null | number,
   is?: string,
   size?: number,
+  value?: string,
+  defaultValue?: string,
+  checked?: boolean,
+  defaultChecked?: boolean,
   multiple?: boolean,
   src?: string | Blob | MediaSource | MediaStream, // TODO: Response
   srcSet?: string,
@@ -844,14 +851,44 @@ export function commitMount(
 export function commitHydratedInstance(
   domElement: Instance,
   type: string,
-  newProps: Props,
+  props: Props,
   internalInstanceHandle: Object,
 ): void {
+  if (!enableHydrationChangeEvent) {
+    return;
+  }
   // This fires in the commit phase if a hydrated instance needs to do further
   // work in the commit phase. Similar to commitMount. However, this should not
   // do things that would've already happened such as set auto focus since that
   // would steal focus. It's only scheduled if finalizeHydratedChildren returns
   // true.
+  switch (type) {
+    case 'input': {
+      hydrateInput(
+        domElement,
+        props.value,
+        props.defaultValue,
+        props.checked,
+        props.defaultChecked,
+      );
+      break;
+    }
+    case 'select': {
+      hydrateSelect(
+        domElement,
+        props.value,
+        props.defaultValue,
+        props.multiple,
+      );
+      break;
+    }
+    case 'textarea':
+      hydrateTextarea(domElement, props.value, props.defaultValue);
+      break;
+    case 'img':
+      // TODO: Should we replay onLoad events?
+      break;
+  }
 }
 
 export function commitUpdate(

packages/react-dom-bindings/src/client/inputValueTracking.js

@@ -51,18 +51,16 @@ function getValueFromNode(node: HTMLInputElement): string {
   return value;
 }
 
-function trackValueOnNode(node: any): ?ValueTracker {
-  const valueField = isCheckable(node) ? 'checked' : 'value';
+function trackValueOnNode(
+  node: any,
+  valueField: 'checked' | 'value',
+  currentValue: string,
+): ?ValueTracker {
   const descriptor = Object.getOwnPropertyDescriptor(
     node.constructor.prototype,
     valueField,
   );
 
-  if (__DEV__) {
-    checkFormFieldValueStringCoercion(node[valueField]);
-  }
-  let currentValue = '' + node[valueField];
-
   // if someone has already defined a value or Safari, then bail
   // and don't track value will cause over reporting of changes,
   // but it's better then a hard failure
@@ -123,7 +121,39 @@ export function track(node: ElementWithValueTracker) {
     return;
   }
 
-  node._valueTracker = trackValueOnNode(node);
+  const valueField = isCheckable(node) ? 'checked' : 'value';
+  // This is read from the DOM so always safe to coerce. We really shouldn't
+  // be coercing to a string at all. It's just historical.
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  const initialValue = '' + (node[valueField]: any);
+  node._valueTracker = trackValueOnNode(node, valueField, initialValue);
+}
+
+export function trackHydrated(
+  node: ElementWithValueTracker,
+  initialValue: string,
+  initialChecked: boolean,
+): boolean {
+  // For hydration, the initial value is not the current value but the value
+  // that we last observed which is what the initial server render was.
+  if (getTracker(node)) {
+    return false;
+  }
+
+  let valueField;
+  let expectedValue;
+  if (isCheckable(node)) {
+    valueField = 'checked';
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    expectedValue = '' + (initialChecked: any);
+  } else {
+    valueField = 'value';
+    expectedValue = initialValue;
+  }
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  const currentValue = '' + (node[valueField]: any);
+  node._valueTracker = trackValueOnNode(node, valueField, expectedValue);
+  return currentValue !== expectedValue;
 }
 
 export function updateValueIfChanged(node: ElementWithValueTracker): boolean {