hydrateInput() — react Function Reference

Architecture documentation for the hydrateInput() function in ReactDOMInput.js from the react codebase.

Function javascript BabelCompiler Validation calls 3

Entity Profile

BabelCompiler→ Validation→ hydrateInput() — react Function Reference

Dependency Diagram

graph TD
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f["hydrateInput()"]
  ebd36fdb_cc70_52b6_9971_bcace1958602["ReactDOMInput.js"]
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f -->|defined in| ebd36fdb_cc70_52b6_9971_bcace1958602
  14e1dad9_019e_0b6b_45f9_989dc6db3084["toString()"]
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f -->|calls| 14e1dad9_019e_0b6b_45f9_989dc6db3084
  7404ee30_0cd4_7886_2806_324f301962c4["getToStringValue()"]
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f -->|calls| 7404ee30_0cd4_7886_2806_324f301962c4
  c5a0889b_7272_0f52_0356_e16d1c8072e4["trackHydrated()"]
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f -->|calls| c5a0889b_7272_0f52_0356_e16d1c8072e4
  style 9bf8e6a3_ca2f_db38_4526_d88118a75d8f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/ReactDOMInput.js lines 347–381

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. Queue a replay of the change event.
    // For radio buttons the change event only fires on the selected one.
    if (node.type !== 'radio' || node.checked) {
      queueChangeEvent(node);
    }
  }
}