How React's Suspense works

[ojj1123]

Suspense

• React18 이전에는 React.lazy 와 함께 code splitting을 위해 사용됨
• React18 부터는 Data fetching , 이미지 로딩 등 비동기 요청에 대해서도 사용하는 것을 목표로 함
  • Suspense 가 해결해주는 문제
• waterfall Rendering 해결 -> concurrent rendering 지원 = Render-as-you-fetch
• Suspense의 자식 컴포넌트는 로딩, 에러 상태의 UI에 대해 신경쓰지 않아도 된다 -> 자식 컴포넌트는 데이터가 있을 때의 UI에만 집중할 수 있다

How Suspense works

• value( = 자식 컴포넌트)를 cache에서 찾는다
• cache에 value가 이미 있다면 그 값을 사용한다
• cache에 value가 없다면 (가까운 Suspense에) promise를 throw한다
• Suspense는 promise를 받아 fallback을 처리한다.
• Suspense가 fallback UI를 보여주는 동안 자식 컴포넌트는 hidden 모드로 렌더링된다.
• throw한 promise가 resolve되면 자식 컴포넌트를 보여준다

[ojj1123]

Question

• 싱글스레드인 자바스크립트로 React는 어떻게 Concurrency mode를 구현했는가?
  • Stack vs Fiber Architecture
  • 두개 이상의 렌더링 작업들 간에 어떤 방식으로 context switching 하는가? 어떻게 코드로 구현되는가?
• Concurrency(동시성) vs Parallelism(병렬성)

[ojj1123]

• Concurrent: 하나의 프로세스(혹은 싱글 스레드) 환경에서 작업들이 한번에 실행되는 것처럼 보임
• Parallelism: 여러개의 프로세스 환경에서 작업들이 동시에 처리됨