Suspense 2

1// This is a React Quiz from BFE.dev 
2
3import * as React from 'react'
4import { Suspense } from 'react'
5import { createRoot } from 'react-dom/client'
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
32function A() {
33  console.log('A1')
34  const data = resource.get()
35  console.log('A2')
36  return <p>{data}</p>
37}
38
39function B() {
40  console.log('B')
41  return null
42}
43
44function Fallback() {
45  console.log('fallback')
46  return null
47}
48
49function App() {
50  console.log('App')
51  return <div>
52    <Suspense fallback={<Fallback/>}>
53      <A/>
54      <B/>
55    </Suspense>
56  </div>
57}
58
59const root = createRoot(document.getElementById('root'));
60root.render(<App/>)