hydrateSelect() — react Function Reference

Architecture documentation for the hydrateSelect() function in ReactDOMSelect.js from the react codebase.

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ hydrateSelect() — react Function Reference

Dependency Diagram

graph TD
  8de7b720_ae26_79c7_6581_f1ecd5cf91a0["hydrateSelect()"]
  45a4825c_28bb_dfd1_ecd2_0adf3836cafc["ReactDOMSelect.js"]
  8de7b720_ae26_79c7_6581_f1ecd5cf91a0 -->|defined in| 45a4825c_28bb_dfd1_ecd2_0adf3836cafc
  14e1dad9_019e_0b6b_45f9_989dc6db3084["toString()"]
  8de7b720_ae26_79c7_6581_f1ecd5cf91a0 -->|calls| 14e1dad9_019e_0b6b_45f9_989dc6db3084
  7404ee30_0cd4_7886_2806_324f301962c4["getToStringValue()"]
  8de7b720_ae26_79c7_6581_f1ecd5cf91a0 -->|calls| 7404ee30_0cd4_7886_2806_324f301962c4
  style 8de7b720_ae26_79c7_6581_f1ecd5cf91a0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/ReactDOMSelect.js lines 161–212

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. Queue a replay of the change event.
    queueChangeEvent(node);
  }
}