trackHydrated() — react Function Reference

Architecture documentation for the trackHydrated() function in inputValueTracking.js from the react codebase.

Function javascript BabelCompiler Validation called by 2

Entity Profile

BabelCompiler→ Validation→ trackHydrated() — react Function Reference

Dependency Diagram

graph TD
  c5a0889b_7272_0f52_0356_e16d1c8072e4["trackHydrated()"]
  87cb1bb7_ad8f_2954_9806_14348a9bbec3["inputValueTracking.js"]
  c5a0889b_7272_0f52_0356_e16d1c8072e4 -->|defined in| 87cb1bb7_ad8f_2954_9806_14348a9bbec3
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f["hydrateInput()"]
  9bf8e6a3_ca2f_db38_4526_d88118a75d8f -->|calls| c5a0889b_7272_0f52_0356_e16d1c8072e4
  3d79164b_d806_37c5_e525_c291e89fad30["hydrateTextarea()"]
  3d79164b_d806_37c5_e525_c291e89fad30 -->|calls| c5a0889b_7272_0f52_0356_e16d1c8072e4
  style c5a0889b_7272_0f52_0356_e16d1c8072e4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/inputValueTracking.js lines 132–160

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: 'checked' | 'value';
  let expectedValue;
  if (isCheckable(node)) {
    valueField = 'checked';
    // eslint-disable-next-line react-internal/safe-string-coercion
    expectedValue = '' + (initialChecked: any);
  } else {
    valueField = 'value';
    expectedValue = initialValue;
  }
  const currentValue =
    // eslint-disable-next-line react-internal/safe-string-coercion
    '' +
    (// $FlowFixMe[prop-missing]
    node[valueField]: any);
  node._valueTracker = trackValueOnNode(node, valueField, expectedValue);
  return currentValue !== expectedValue;
}