Suspense 3

1// This is a React Quiz from BFE.dev 
2
3import * as React from 'react'
4import { Suspense, useMemo } from 'react'
5import { createRoot } from 'react-dom'
6
7const resource = (() => {
8  let data = null
9  let status = 'pending'
10  let fetcher = null
11  return {
12    get() {
13      if (status === 'ready') {
14        return data
15      }
16      if (status === 'pending') {
17        fetcher = new Promise((resolve, reject) => {
18          setTimeout(() => {
19            data = 1
20            status = 'ready'
21            resolve()
22          }, 100)
23        })
24        status = 'fetching'
25      }
26
27      throw fetcher
28    }
29  }
30})()
31
32
33function A() {
34  console.log(1)
35  const memoed = useMemo(() => {
36    console.log(2)
37    return 'memo'
38  }, [])
39
40  const data = resource.get()
41  console.log(3)
42  return memoed + data
43}
44
45function App() {
46  return <Suspense fallback={null}>
47    <A/>
48  </Suspense>
49}
50
51const root = createRoot(document.getElementById('root'));
52root.render(<App/>)