공식문서에서 사용법은 굉장히 잘 나와있음

읽는 중에 의문점이 있어서 조사해봄

useTransition is a React Hook that lets you render a part of the UI in the background.

Perform non-blocking updates with Actions

sync rendering vs concurrent rendering

sync rendering

renderRootSync => workLoopSync

function workLoopSync() {
  // Perform work without checking if we need to yield between fiber.
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

도중에 멈출수 없음

concurrent rendering

renderRootConcurrent => workLoopConcurrent

function workLoopConcurrent(nonIdle: boolean) {
  if (workInProgress !== null) {
    const yieldAfter = now() + (nonIdle ? 25 : 5);
    do {
      performUnitOfWork(workInProgress);
    } while (workInProgress !== null && now() < yieldAfter);
  }
}

중간에 업데이트를 멈출수 있는 로직이 있음

non-blocking 은 fiber 작업단위에서 non-blocking 하다는 뜻