function commitRootImpl(root, renderPriorityLevel) {
  const finishedWork = root.finishedWork
  const expirationTime = root.finishedExpirationTime
  if (finishedWork === null) {
    return null
  }

  // 초기화
  root.finishedWork = null
  root.finishedExpirationTime = NoWork
  root.callbackNode = null
  root.callbackExpirationTime = NoWork
  root.callbackPriority = NoPriority
  root.nextKnownPendingLevel = NoWork

  // Effect list의 head를 가지고 온다.
  let firstEffect
  if (finishedWork.effectTag > PerformedWork) {
    if (finishedWork.lastEffect !== null) {
      finishedWork.lastEffect.nextEffect = finishedWork
      firstEffect = finishedWork.firstEffect
    } else {
      firstEffect = finishedWork
    }
  } else {
    // There is no effect on the root.
    firstEffect = finishedWork.firstEffect
  }

  if (firstEffect !== null) {
    const prevExecutionContext = executionContext
    executionContext |= CommitContext

    // 전
    nextEffect = firstEffect
    do {
      try {
        commitBeforeMutationEffects()      } catch (error) {
        invariant(nextEffect !== null, 'Should be working on an effect.')
        captureCommitPhaseError(nextEffect, error)
        nextEffect = nextEffect.nextEffect
      }
    } while (nextEffect !== null)

    // 변형
    nextEffect = firstEffect
    do {
      try {
        commitMutationEffects(root, renderPriorityLevel)      } catch (error) {
        invariant(nextEffect !== null, 'Should be working on an effect.')
        captureCommitPhaseError(nextEffect, error)
        nextEffect = nextEffect.nextEffect
      }
    } while (nextEffect !== null)

    // workInProgress tree를 DOM에 적용했으니 이젠 current로 취급한다.
    root.current = finishedWork

    // 후
    nextEffect = firstEffect
    do {
      try {
        commitLayoutEffects(root, expirationTime)      } catch (error) {
        invariant(nextEffect !== null, 'Should be working on an effect.')
        captureCommitPhaseError(nextEffect, error)
        nextEffect = nextEffect.nextEffect
      }
    } while (nextEffect !== null)

    nextEffect = null

    // 브라우저가 화면을 렌더링 할 수 있도록 scheduler에게 알린다.
    requestPaint()
    executionContext = prevExecutionContext
  } else {
    // No effects.
    root.current = finishedWork
  }

  // Passive effect(useEffect)를 위한 설정
  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects
  if (rootDoesHavePassiveEffects) {
    // 화면이 그려지고 난 후에 실행될 effect들이 아직 남아 있으므로 root를 잡아둔다.
    rootDoesHavePassiveEffects = false    rootWithPendingPassiveEffects = root    pendingPassiveEffectsExpirationTime = expirationTime    pendingPassiveEffectsRenderPriority = renderPriorityLevel  } else {
    // Passive effect가 없으면 effect를 모두 소비한 것이므로 GC를 위해 참조를 끊어준다.
    nextEffect = firstEffect
    while (nextEffect !== null) {
      const nextNextEffect = nextEffect.nextEffect
      nextEffect.nextEffect = null
      nextEffect = nextNextEffect
    }
  }

  ensureRootIsScheduled(root)
  flushSyncCallbackQueue()
  return null
}

  
function commitBeforeMutationEffects() {
  while (nextEffect !== null) {    const effectTag = nextEffect.effectTag
    // 클래스 컴포넌트의 getSnapshotBeforeUpdate()
    if ((effectTag & Snapshot) !== NoEffect) {
      const current = nextEffect.alternate
      commitBeforeMutationEffectOnFiber(current, nextEffect)
    }

    // useEffect()를 사용하면 Passive tag가 달린다.
    if ((effectTag & Passive) !== NoEffect) {
      if (!rootDoesHavePassiveEffects) {
        rootDoesHavePassiveEffects = true // root를 잡아둬야 하는지 알려주는 플래그
        // 다음 프레임이 실행될 수 있도록 Passive effect 소비 함수 전달
        scheduleCallback(NormalPriority, () => { 
          flushPassiveEffects()
          return null
        })
      }
    }

    nextEffect = nextEffect.nextEffect  }
}

  
function commitBeforeMutationLifeCycles(current, finishedWork) {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      // noop
      return
    }
    case ClassComponent: {
      if (finishedWork.effectTag & Snapshot) {
        if (current !== null) {
          const prevProps = current.memoizedProps
          const prevState = current.memoizedState
          const instance = finishedWork.stateNode // class instance
          const snapshot = instance.getSnapshotBeforeUpdate(            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps), // defaultProps 적용
            prevState
          )
          instance.__reactInternalSnapshotBeforeUpdate = snapshot        }
      }
      return
    }
    //HostRoot, HostComponent..
    default: {
      invariant(
        false,
        'This unit of work tag should not have side-effects. This error is ' +
          'likely caused by a bug in React. Please file an issue.'
      )
    }
  }
}

  
import {
  Update as UpdateEffect,
  Passive as PassiveEffect,
} from 'shared/ReactSideEffectTags';
import {
  UnmountMutation,
  MountLayout,
  UnmountPassive,
  MountPassive,
} from './ReactHookEffectTags';

// useEffect()
function mountEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null
): void {
  return mountEffectImpl(
    UpdateEffect | PassiveEffect,    UnmountPassive | MountPassive,    create,
    deps
  )
}
// useLayoutEffect()
function mountLayoutEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null
): void {
  return mountEffectImpl(
    UpdateEffect,    UnmountMutation | MountLayout,    create,
    deps
  )
}

  
// useEffect()
function updateEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null
): void {
  return updateEffectImpl(
    UpdateEffect | PassiveEffect,    UnmountPassive | MountPassive,    create,
    deps,
  );
}

// useLayoutEffect()
function updateLayoutEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null
): void {
  return updateEffectImpl(
    UpdateEffect,    UnmountMutation | MountLayout,    create,
    deps,
  );
}

function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
  const hook = updateWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps
  let destroy = undefined

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState
    destroy = prevEffect.destroy
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(NoHookEffect, create, destroy, nextDeps)        return
      }
    }
  }

  sideEffectTag |= fiberEffectTag
  hook.memoizedState = pushEffect(hookEffectTag, create, destroy, nextDeps)}

  
// function commitPassiveHookEffects(...) {
//    /*...*/
//    commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);//    commitHookEffectList(NoHookEffect, MountPassive, finishedWork);// }

function commitHookEffectList(unmountTag, mountTag, finishedWork) {
  const updateQueue = finishedWork.updateQueue
  let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next
    let effect = firstEffect
    do {
      if ((effect.tag & unmountTag) !== NoHookEffect) {
        // Unmount
        const destroy = effect.destroy
        effect.destroy = undefined
        if (destroy !== undefined) {
          destroy()
        }
      }
      if ((effect.tag & mountTag) !== NoHookEffect) {
        // Mount
        const create = effect.create
        effect.destroy = create()
      }
      effect = effect.next
    } while (effect !== firstEffect)
  }
}

  
function commitPlacement(finishedWork: Fiber): void {
  // Recursively insert all host nodes into the parent.
  const parentFiber = getHostParentFiber(finishedWork)
  let parent
  let isContainer
  const parentStateNode = parentFiber.stateNode
  // 부모 HTML element 추출
  switch (parentFiber.tag) {
    case HostComponent:
      parent = parentStateNode
      isContainer = false
      break
    case HostRoot:
      // Host root의 stateNode는 root이므로 containerInfo에서 꺼내야 합니다.
      parent = parentStateNode.containerInfo
      isContainer = true
      break
    /*...*/
    default:
      invariant(
        false,
        'Invalid host parent fiber. This error is likely caused by a bug ' +
          'in React. Please file an issue.'
      )
  }
  /*...*/
}

function getHostParentFiber(fiber: Fiber): Fiber {
  let parent = fiber.return
  while (parent !== null) {
    if (isHostParent(parent)) {       return parent
    }
    parent = parent.return
  }
  invariant(
    false,
    'Expected to find a host parent. This error is likely caused by a bug ' +
      'in React. Please file an issue.'
  )
}

function isHostParent(fiber: Fiber): boolean {
  return (
    fiber.tag === HostComponent ||
    fiber.tag === HostRoot ||
    fiber.tag === HostPortal
  )
}

  
function commitPlacement(finishedWork: Fiber): void {
  // const parentFiber = getHostParentFiber(finishedWork)
  // switch (parentFiber.tag) {...}

  const before = getHostSibling(finishedWork)
  /*...*/
}

function getHostSibling(fiber: Fiber): ?Instance {
  let node: Fiber = fiber
  siblings: while (true) {
    while (node.sibling === null) {      if (node.return === null || isHostParent(node.return)) {        return null      }      node = node.return    }
    node.sibling.return = node.return    node = node.sibling
    while (node.tag !== HostComponent && node.tag !== HostText) {      if (node.effectTag & Placement) {        continue siblings      }      if (node.child === null) {        continue siblings      } else {        node.child.return = node        node = node.child      }    }
    if (!(node.effectTag & Placement)) {
      // Found it!
      return node.stateNode
    }
  }
}

function Todo() {
  const [todos, push] = useState([]);
  const [isMounted, mountInput] = useState(false);  setTimeout(() => {    mountInput(true);  }, 3000)
  return (
    <div>      {isMounted ? <Input submit={todo => push(todos => [...todos, todo])} /> : null}      <OrderList list={todos} />
    </div>  )
}

  
function commitWork(current: Fiber | null, finishedWork: Fiber): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case MemoComponent:
    case SimpleMemoComponent: {
      // Note: We currently never use MountMutation, but useLayout uses UnmountMutation.
      commitHookEffectList(UnmountMutation, MountMutation, finishedWork); // clean-up 함수 호출.      return;
    }
    case ClassComponent: {
      return;
    }
    case HostComponent: {
      const instance: Instance = finishedWork.stateNode;
      if (instance != null) {
        const newProps = finishedWork.memoizedProps;
        const updatePayload= finishedWork.updateQueue; // element의 변경점을 담고 있다.
        finishedWork.updateQueue = null;
        if (updatePayload !== null) {
          commitUpdate(instance, updatePayload, newProps);        }
      }
      return;
    }
    case HostText: {
      const textInstance: TextInstance = finishedWork.stateNode;
      const newText: string = finishedWork.memoizedProps;
      commitTextUpdate(textInstance, newText); // textInstance.nodeValue = newText;
      return;
    }
    /*...*/
    default: {
      invariant(
        false,
        'This unit of work tag should not have side-effects. This error is ' +
          'likely caused by a bug in React. Please file an issue.',
      );
    }
  }
}

  
function commitUnmount(
  finishedRoot: FiberRoot,
  current: Fiber,
  renderPriorityLevel: ReactPriorityLevel,
): void {
  switch (current.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      const updateQueue = current.updateQueue;
      if (updateQueue !== null) {
        const lastEffect = updateQueue.lastEffect;
        if (lastEffect !== null) {
          const firstEffect = lastEffect.next;

          const priorityLevel =
            renderPriorityLevel > NormalPriority
              ? NormalPriority
              : renderPriorityLevel;
          runWithPriority(priorityLevel, () => {
            let effect = firstEffect;
            do {
              const destroy = effect.destroy;
              if (destroy !== undefined) {
                safelyCallDestroy(current, destroy); // destroy();              }
              effect = effect.next;
            } while (effect !== firstEffect);
          });
        }
      }
      break;
    }
    case ClassComponent: {
      const instance = current.stateNode;
      if (typeof instance.componentWillUnmount === 'function') {
        safelyCallComponentWillUnmount(current, instance); // instance.componentWillUnmount();      }
      return;
    }
  }
}

  
function commitLayoutEffects(root, committedExpirationTime) {
  while (nextEffect !== null) {
    const effectTag = nextEffect.effectTag;
    if (effectTag & (Update | Callback)) {      const current = nextEffect.alternate;
      commitLifeCycles(root, current, nextEffect, committedExpirationTime);
    }
    nextEffect = nextEffect.nextEffect;
  }
}

  
function commitLifeCycles(finishedRoot, current, finishedWork, committedExpirationTime) {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      commitHookEffectList(UnmountLayout, MountLayout, finishedWork); // layoutEffect      break;
    }
    case ClassComponent: {
      const instance = finishedWork.stateNode;
      if (finishedWork.effectTag & Update) {
        if (current === null) {
          instance.componentDidMount();        } else {
          const prevProps = finishedWork.elementType === finishedWork.type
              ? current.memoizedProps
              : resolveDefaultProps(finishedWork.type, current.memoizedProps); // defaultProps 적용
          const prevState = current.memoizedState;
          instance.componentDidUpdate(            prevProps,
            prevState,
            instance.__reactInternalSnapshotBeforeUpdate // commitBeforeMutationEffectOnFiber에서 찍어놨던 스냅샷
          );
        }
      }
      return;
    }
    case HostComponent: {
      const instance: Instance = finishedWork.stateNode;
      if (current === null && finishedWork.effectTag & Update) {
        const type = finishedWork.type;
        const props = finishedWork.memoizedProps;
        commitMount(instance, type, props, finishedWork); // auto-focus      }
      return;
    }
     /*...*/
    default: {
      invariant(
        false,
        'This unit of work tag should not have side-effects. This error is ' +
          'likely caused by a bug in React. Please file an issue.',
      );
    }
  }
}