IWSR

  import { useRef } from "react";

  function UseRef() {
    const ref1 = useRef(null);
    const ref2 = useRef({
      a: 1,
    });

    const handleClick = () => {
      ref2.current = {
        a: 3
      }
    }

    return (
      <div id="refTest" ref={ref1} onClick = {handleClick}>123</div>
    )
  }

  export default UseRef;

function mountRef<T>(initialValue: T): {|current: T|} {
  // The content of the hooks linked list, used to create a hook object and mount it to the hooks linked list
  const hook = mountWorkInProgressHook();   
  if (enableUseRefAccessWarning) {
    const ref = {current: initialValue};
    hook.memoizedState = ref;
    return ref;
  } else {
    // Create an object to store the initial value, which is the parameter passed in useRef
    const ref = {current: initialValue};
    // And store this object in the memoizedState property of the hook object
    hook.memoizedState = ref;
    return ref;
  }
}

function updateRef<T>(initialValue: T): {|current: T|} {
  // updateWorkInProgressHook will create a new hook object based on the corresponding hook object on the current tree
  // The reference address of ref (stored in memoizedState) will also be assigned to the new hook's memoizedState
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

  {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  /**
   *  Removed many unnecessary codes
  */
  function mountIndeterminateComponent(...) {
    ...
    /**
     * renderWithHooks will return the result returned by UseRef
     * that is, the ReactElement returned by this function component
     * */
    value = renderWithHooks(...)
    ...
    /**
     * reconcileChildren passes the ReactElement to diff and generate fiber
    */
    reconcileChildren(null, workInProgress, value, renderLanes);
  }
  
  function renderWithHooks(...) {
    ...
    let children = Component(props, secondArg);
    ...
    return children;
  }

function markRef(current: Fiber | null, workInProgress: Fiber) {
  // Here, ref is ref1 in the example
  const ref = workInProgress.ref;
  /**
   * When either of the following two conditions is met, the execution body will be entered
   * 1. On the first update, ref is not null
   * 2. On non-first updates, the ref on WIP is different from the ref on current, indicating a change
  */
  if (
    (current === null && ref !== null) ||
    (current !== null && current.ref !== ref)
  ) {
    // Schedule a Ref effect
    /**
     * Marks Ref on WIP's flags through bitwise operations to indicate an update has occurred
    */
    workInProgress.flags |= Ref;
    if (enableSuspenseLayoutEffectSemantics) {
      workInProgress.flags |= RefStatic;
    }
  }
}

  import React from "react";

  class UseRef extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }

    componentDidMount() {
      console.log(this.myRef);
    }

    render() {
      return <div ref={this.myRef} />;
    }
  }

  export default UseRef;

  function commitLayoutEffectOnFiber(...) {
    ...
    if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
      if (enableScopeAPI) {
        // TODO: This is a temporary solution that allowed us to transition away
        // from React Flare on www.
        /**
         * finishedWork.flags & Ref
         * & operator can indicate whether it contains a feature; if it does not contain the feature, the result is 0
         * For example, 0110 indicates all features owned, 0010 indicates a specific feature
         * To check if 0110 has feature 0010, run 0110 & 0010 to get the result 0010
         * If the result is non-zero, it can be determined that 0110 contains 0010
        */
        if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
          commitAttachRef(finishedWork);
        }
      } else {
        if (finishedWork.flags & Ref) {
          commitAttachRef(finishedWork);
        }
      }
    }
    ...
  }

  function commitAttachRef(finishedWork: Fiber) {
  const ref = finishedWork.ref; // ref on fiber, at this point ref.current is null
  if (ref !== null) {
    const instance = finishedWork.stateNode; // stateNode holds the DOM object
    let instanceToUse;
    switch (finishedWork.tag) {
      case HostComponent:
        instanceToUse = getPublicInstance(instance);
        break;
      default:
        instanceToUse = instance;
    }

    ...

    if (typeof ref === 'function') {
      let retVal;
      ...
      retVal = ref(instanceToUse); // refs can also be callbacks...
    } else {

      ref.current = instanceToUse; // This is the logic for binding the DOM, after assignment it ensures that refs' DOM is up to date.
    }
  }
}