Suspense와 Concurrent Mode의 관계성

Concurrent mode의 본질

• 중단 가능한 렌더링
  • 렌더링 작업을 작은 단위로 나누어, 중단/재게 가능
• 우선순위 기반 렌더링
  • 중요한 업데이트를 먼저 처리한다.
• 논블로킹 렌더링
  • 무거운 작업이 사용자의 인터렉션을 블로킹하지 않음.

Suspense 의 역할

• Suspense는 단순히, 로딩컴포넌트를 선언적으로 보여주기위한 장치가 아니다. 이를 넘어서, Concurrent Mode의 기술적 기반위에 구축된 API라고 봐야함.
• 해당 컴포넌트 렌더링을 특정 조건(데이터 준비)까지 일시 중단한다.
• UI 컴포넌트와 특정 데이터의 관계를 강결합시킨다. (이 UI는 뫄뫄 데이터가 와야 렌더링된다.)
• 즉, Suspense는 렌더링 오케스트레이션 메커니즘.

Concurrent Mode - Suspense

• Suspense 는 Promise 를 throw하여 렌더링을 중단시킨다.
• Concurrent Mode 는 이 중단된 렌더링을 추적하고, Promise 가 리졸브 되었을 때, 렌더링을 재게한다.
• 이 두 기능이 함께 작동하여 비동기 UI 패턴이 구현됨.
• 즉, Suspense는 React의 동시성 렌더링을 실현하는 핵심 매커니즘임.
  • 여러 컴포넌트의 렌더링을 인터리빙하여 전체 UI 응답성 향상.

결국 Suspense와 Concurrent Mode 는 사용자 경험(UX)향상 도구이다.

• 동시성 모드는 기존에 복잡한 UI 업데이트가 메인스레드를 차단하여, 사용자 입력 등에 지연이 발생하던걸 해결해준다.
• Suspense는 리액트의 동시성 모드 매커니즘을 돕는 역할.
  • 즉, Suspense는 단순히 로딩 상태 처리도구가 아니라, 리액트의 동시성 렌더링 모델에 애플리케이션을 연결하는 브릿지 역할임.
  • Suspense를 통해서 선언적으로 렌더링 중단 지점을 정의하여, 리액트 런타임이 렌더링 작업을 스케쥴링 할 수 있게 해줌.

Suspense - 비Suspense 영역을 잘 구분하기.

tanstack-query를 예시로 들자면,

• useQuery는 Suspense와 달리 렌더링을 중단하지 않음. 즉, useQuery를 사용하는 UI 컴포넌트는 데이터 여부와 관계 없이 렌더링을 완료함.

따라서, 하나의 UI 내에서도 데이터에 강하게 의존하지 않는 부분이라면, 비-Suspense영역으로 선언하는게 나을 수 있다.

1. 오히려 Suspense영역으로 선언하게 되면, 괜히 부수적인 데이터에 의해서 렌더링이 중단되고,
2. 점진적 향상을 적용할수 있어서. (데이터 없이도 의미있는 UI라면 사용자에게 데이터가 오기전에 먼저 보여주는게 맞다.)