Next.js 학습v16.3.2
시각화 목록
React · Transitions

Concurrent Transitions

양보하는 렌더 레인에서는 청크 사이마다 메인 스레드 제어권을 넘겨주고, 남은 작업이 다음 태스크로 예약되는 흐름을 점선 아크 위의 파티클로 보여줍니다. 입력은 그 틈에서 16ms에 처리됩니다.

0ms / 400ms
동기 롱 태스크리스트 청크키 입력 처리글자 렌더
최대 입력 지연250ms→16ms16× 빠름타임라인을 드래그하면 그 시각으로 이동합니다 · 블록에 마우스를 올리면 아래 설명과 연결됩니다

🔒 동기 렌더 — 끝날 때까지 안 놓는다

250ms

10,000개 리스트를 한 태스크에서 만든다. 그 300ms 동안 메인 스레드는 잠겨 있고, 사이에 들어온 키 입력은 큐에서 순서를 기다린다.

  1. ①
    10,000개 동기 렌더0ms – 300ms

    리스트 전체를 하나의 태스크에서 생성한다. 브라우저는 이 함수가 반환되기 전에는 어떤 이벤트도 처리할 수 없다.

  2. ②
    입력300ms – 310ms

    태스크가 끝나고서야 밀려 있던 키 입력이 처리된다.

  3. ③
    렌더310ms – 340ms

    입력창에 글자가 뒤늦게 한꺼번에 나타난다.

  • 키 입력 · 250ms 대기

⚡ startTransition — 틈마다 양보한다

16ms

같은 총량을 60~70ms 청크로 쪼개고, 청크 사이마다 제어권을 브라우저에 돌려준다. 그 틈에서 키 입력이 16ms 만에 처리된다.

  1. ①
    청크 10ms – 60ms

    리스트의 첫 조각만 만들고 프레임 예산이 차기 전에 멈춘다.

  2. ②
    입력60ms – 76ms

    양보된 틈에서 키 입력이 곧바로 처리된다.

  3. ③
    렌더76ms – 90ms

    입력한 글자가 같은 프레임에 화면에 나타난다.

  4. ④
    청크 290ms – 160ms

    남은 작업을 다음 태스크로 이어서 진행한다.

  5. ⑤
    입력160ms – 176ms

    두 번째 키 입력도 같은 방식으로 즉시 처리된다.

  6. ⑥
    렌더176ms – 190ms

    타이핑이 끊기지 않고 이어진다.

  7. ⑦
    청크 3190ms – 260ms

    급하지 않은 리스트 렌더는 낮은 우선순위로 계속된다.

  8. ⑧
    청크 4260ms – 330ms

    총 작업량은 같지만 사용자는 멈춤을 느끼지 않는다.

  • 키 입력 · 16ms 대기
  • 키 입력 · 16ms 대기

같은 그룹의 다른 시각화