You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 10-suspense-for-data-fetching/README.md
+8-3
Original file line number
Diff line number
Diff line change
@@ -10,13 +10,13 @@ npm ci
10
10
npm start
11
11
```
12
12
13
-
Development server should open on the port 1234 _(unfortunately hot reload doesn't work with parcel and react experimental)_.
13
+
We are using Parcel (https://parceljs.org/) for development server instead of webpack. It starts on port 1234._(unfortunately hot reload sometimes doesn't work with parcel and react experimental, therefore is disabled)_.
14
14
15
15
## Introduction
16
16
17
17
- React Suspense for Data Fetching is pretty experimental, so there are some rough edges that you're going to be working through.
18
18
- The APIs can change in the future.
19
-
- Only Facebook it is using in production with Relay.
19
+
- Only Facebook is using it in production with Relay.
20
20
- One of the things that I love about React in general, is that they're always applying the things that they're presenting to us internally at Facebook first, so they get some of the quirks worked out.
21
21
- We're playing around with things, we're making little abstractions from things. Some of these things might be a bad idea, some of them might be good ideas. This is the whole point of this workshop, is to experiment with this, get familiar with the ideas and the concepts and the things that it enables, and then let you run off and play around with it, and give feedback back to the React team.
22
22
@@ -44,6 +44,11 @@ Start fetching all the required data for the next screen as early as possible, a
44
44
45
45
## Setup
46
46
47
+
Install experimental React
48
+
```
49
+
npm install react@experimental
50
+
```
51
+
47
52
Use concurrent mode to enable experimental features.
48
53
49
54
```
@@ -84,7 +89,7 @@ Here’s what happens when we render `<Page>` on the screen:
84
89
85
90
- React tries to render `<Page>`. It returns `<People>` as children.
86
91
87
-
- React tries to render `<People>`. It calls `peopleResource.read()`. None of the data is fetched yet, so this component “suspends”. React skips over it, and tries rendering other components in the tree.
92
+
- React tries to render `<People>`. It calls `peopleResource.read()`. That will throw a Promise, no further code in `<People>` is executed. None of the data is fetched yet, so this component “suspends”. React skips over it, and tries rendering other components in the tree.
88
93
89
94
- There’s nothing left to try rendering. Because `<People>` suspended, React shows the closest `<Suspense>` fallback above it in the tree: "Loading people...". We’re done for now.
0 commit comments