Function commitMount

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js:808–867

(
  domElement: Instance,
  type: string,
  newProps: Props,
  internalInstanceHandle: Object,
)

export const supportsMutation = true;

export function commitMount(
  domElement: Instance,
  type: string,
  newProps: Props,
  internalInstanceHandle: Object,
): void {
  // Despite the naming that might imply otherwise, this method only
  // fires if there is an `Update` effect scheduled during mounting.
  // This happens if `finalizeInitialChildren` returns `true` (which it
  // does to implement the `autoFocus` attribute on the client). But
  // there are also other cases when this might happen (such as patching
  // up text content during hydration mismatch). So we'll check this again.
  switch (type) {
    case 'button':
    case 'input':
    case 'select':
    case 'textarea':
      if (newProps.autoFocus) {
        ((domElement: any):
          | HTMLButtonElement
          | HTMLInputElement
          | HTMLSelectElement
          | HTMLTextAreaElement).focus();
      }
      return;
    case 'img': {
      // The technique here is to assign the src or srcSet property to cause the browser
      // to issue a new load event. If it hasn't loaded yet it'll fire whenever the load actually completes.
      // If it has already loaded we missed it so the second load will still be the first one that executes
      // any associated onLoad props.
      // Even if we have srcSet we prefer to reassign src. The reason is that Firefox does not trigger a new
      // load event when only srcSet is assigned. Chrome will trigger a load event if either is assigned so we
      // only need to assign one. And Safari just never triggers a new load event which means this technique
      // is already a noop regardless of which properties are assigned. We should revisit if browsers update
      // this heuristic in the future.
      if (newProps.src) {
        const src = (newProps: any).src;
        if (enableSrcObject && typeof src === 'object') {
          // For object src, we can't just set the src again to the same blob URL because it might have
          // already revoked if it loaded before this. However, we can create a new blob URL and set that.
          // This is relatively cheap since the blob is already in memory but this might cause some
          // duplicated work.
          // TODO: We could maybe detect if load hasn't fired yet and if so reuse the URL.
          try {
            setSrcObject(domElement, type, src);
            return;
          } catch (x) {
            // If URL.createObjectURL() errors, it was probably some other object type
            // that should be toString:ed instead, so we just fall-through to the normal
            // path.
          }
        }
        ((domElement: any): HTMLImageElement).src = src;
      } else if (newProps.srcSet) {
        ((domElement: any): HTMLImageElement).srcset = (newProps: any).srcSet;
      }
      return;
    }