Concurrent mode

• 동시성이란, 여러 작업을 동시에 준비하고 처리할 수 있는 기능
  • 실제로 동시에 실행된다기 보다, 작업을 중단하고 재개할 수 있는 것

as-is

• 하나의 렌더링 작업이 시작되면, 완료될 때 까지 중단되지 않았음

to-be

• 렌더링 작업을 중단하고, 더 중요한 업데이트를 먼저 처리 할 수 있다.

특징

1. 렌더링 작업의 우선순위를 지정한다.
2. 렌더링 작업을 중단하고 재개한다.
3. UI업데이트를 지연 혹은 건너뛰기가 가능하다.

목적

• 사용자 경험 개선
  • 중요한 업데이트는 빠르게 반영하고, 덜 중요한 업데이트는 지연시킬 수 있다.
• 성능 최적화
  • 불필요한 렌더링을 줄이고, 리소스를 효율적으로 사용한다.

주요 기능

• Suspense
  • 컴포넌트의 렌더링을 특정 조건(ex.데이터 로딩)이 충족될 때 까지 지연 시킬 수 있음
• useTransition
  • 긴급하지 않은 상태 업데이트를 표시하고 처리할 수 있음
• useDeferredValue
  • 값의 업데이트를 지연시켜 더 중요한 업데이트가 먼저 처리되도록 한다.

사용 예시

• 타이핑과 자동완성
  • 타이핑응답은 높은 우선순위, 자동완성목록 업데이트는 낮은 우선순위로 처리할 수 있다.