Suspense 1

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 Fallback() {
40  console.log('fallback')
41  return null
42}
43
44function App() {
45  console.log('App')
46  return <div>
47    <Suspense fallback={<Fallback/>}>
48      <A/>
49    </Suspense>
50  </div>
51}
52
53const root = createRoot(document.getElementById('root'));
54root.render(<App/>)