[BFE.dev] Suspense 3

Suspense 3

// This is a React Quiz from BFE.dev 

import * as React from 'react'
import { Suspense, useMemo } from 'react'
import { createRoot } from 'react-dom'

const resource = (() => {
  let data = null
  let status = 'pending'
  let fetcher = null
  return {
    get() {
      if (status === 'ready') {
        return data
      }
      if (status === 'pending') {
        fetcher = new Promise((resolve, reject) => {
          setTimeout(() => {
            data = 1
            status = 'ready'
            resolve()
          }, 100)
        })
        status = 'fetching'
      }

      throw fetcher
    }
  }
})()


function A() {
  console.log(1)
  const memoed = useMemo(() => {
    console.log(2)
    return 'memo'
  }, [])

  const data = resource.get()
  console.log(3)
  return memoed + data
}

function App() {
  return <Suspense fallback={null}>
    <A/>
  </Suspense>
}

const root = createRoot(document.getElementById('root'));
root.render(<App/>)

출력 결과

1
2
1
2
3

풀이 과정

1. 초기 렌더링

• 1 출력: root.render(<App />)가 실행되면서 <A/> 컴포넌트 내에 1이 출력됩니다.

• 2 출력: <A/> 컴포넌트 내에 useMemo가 실행되어 2가 출력됩니다.

• fallback 실행: Promise가 throw되면 렌더링을 중단하고 fallback을 실행합니다.

2. 상태 업데이트 후 재렌더링

• 1 출력: <A/> 컴포넌트가 다시 호출되어 1을 출력합니다.

• 2 출력: useMemo가 다시 호출됩니다. 하지만 이전 렌더링 시도가 완성되지 못하고 중단되었기 때문에 이전에 실행된 useMemo 값을 유지하지 않고 새로 실행합니다.

  (useMemo는 해당 컴포넌트의 초기 마운트 중에 컴포넌트가 중단되면, 캐시를 삭제합니다.)

• 3 출력: resource.get()이 정상적으로 호출되고, 아래의 3을 출력하게 됩니다.