sora

// https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js#L273
const setUntrackedValue = Object.getOwnPropertyDescriptor(
  HTMLInputElement.prototype,
  'value',
).set;

...

    // プログラム的に設定します。
    input.value = 'bar';
    // DOMのinputイベントが発火しても、Reactは実際のinput値が
    // （'bar'）がすでに記録された「現在の」値と同じであることを認識します。
    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
    expect(input.value).toBe('bar');
    // この場合、Reactイベントが発生することは期待していません。
    expect(called).toBe(0);

    // しかし、基礎となるセッターを呼び出すことでユーザーの入力をシミュレートできます。
    setUntrackedValue.call(input, 'foo');
    // 今、イベントが発火すると、実際のinput値（'foo'）は
    // 以前に記録された「現在の」値（'bar'）と異なります。
    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
    expect(input.value).toBe('foo');
    // この場合、Reactはそれに対してイベントを発火させるべきです。
    expect(called).toBe(1);

// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/inputValueTracking.js#L79
  Object.defineProperty(node, valueField, {
    configurable: true,
    // $FlowFixMe[missing-this-annot]
    get: function () {
      return get.call(this);
    },
    // $FlowFixMe[missing-local-annot]
    // $FlowFixMe[missing-this-annot]
    set: function (value) {
      if (__DEV__) {
        checkFormFieldValueStringCoercion(value);
      }
      currentValue = '' + value;
      set.call(this, value);
    },
  });
  // 最初にこれを渡すことができましたが、
  // それはIE11とEdge 14/15でバグを引き起こします。
  // defineProperty()を再度呼び出すことは同等であるべきです。
  // https://github.com/facebook/react/issues/11768
  Object.defineProperty(node, valueField, {
    enumerable: descriptor.enumerable,
  });

  const tracker = {
    getValue() {
      return currentValue;
    },
    setValue(value: string) {
      if (__DEV__) {
        checkFormFieldValueStringCoercion(value);
      }
      currentValue = '' + value;
    },
    stopTracking() {
      detachTracker(node);
      delete node[valueField];
    },
  };
  return tracker;

// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/inputValueTracking.js
export function updateValueIfChanged(node: ElementWithValueTracker): boolean {
  if (!node) {
    return false;
  }

  const tracker = getTracker(node);
  // この時点でトラッカーがない場合、再試行しても成功する可能性は低いです。
  if (!tracker) {
    return true;
  }

  const lastValue = tracker.getValue(); // 注：currentValue
  const nextValue = getValueFromNode(node); // 注：input.value
  if (nextValue !== lastValue) {
    tracker.setValue(nextValue);
    return true;
  }
  return false;
}

// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactDOMInput.js#L340
export function restoreControlledInputState(element: Element, props: Object) {
  const rootNode: HTMLInputElement = (element: any);
  updateInput(
    rootNode,
    props.value,
    props.defaultValue,
    props.defaultValue,
    props.checked,
    props.defaultChecked,
    props.type,
    props.name,
  );

    ...

}

// https://github.com/facebook/react/commit/a67757e11540936677b0a5d89d623b3e38b5fe69#diff-76a986d539bc7c94d63e46233a9537e03d8994f69ac4e4cd332631bc911a1c09R81

    // "重複"するReactの変更イベントを発火させないようにします。
    // しかし、どのイベントが重複していて無視されるべきかを判断するために、
    // "現在の"入力値を追跡しており、変更があった後に発生するイベントのみを尊重します。このテストでは、プログラム的に設定しても
    // "現在の"値を追跡できることを確認します。

    // プログラム的に設定します。
    input.value = 'bar';