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: README.md
+31-13Lines changed: 31 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,12 @@
1
1
# experimental-react-suspender
2
-
An experimental alternative approach to React Concurrent Mode Experimental Suspense component
2
+
An alternative approach to React Concurrent Mode Experimental Suspense component
3
3
4
+
# Disclaimer:
5
+
experimental-react-suspender is listed as "experimental" for two reasons.
6
+
1) React's Suspense is still in its experimental stage
7
+
2) This library is unique in the way it handles async props. While this is being used in production, it is not heavily battle tested and there are likely corner cases that will need to be patched in coming updates.
8
+
9
+
# What does it do?
4
10
experimental-react-suspender exports one component "Suspender". Suspender is responsible for doing an array of things..it will
5
11
1) Look for async props passed to any of its children
6
12
2) Resolve all async props by calling .then on each of promise (this will add them to the tasks event loop)
@@ -12,26 +18,38 @@ experimental-react-suspender exports one component "Suspender". Suspender is res
12
18
`npm install experimental-react-suspender`
13
19
14
20
## USAGE
15
-
`import { Suspender } from 'experimental-react-suspender`
16
-
17
-
### IMPORTANT
18
-
##### Suspender should wrap the child components that will be responsible for rendering the data or the entire tree will suspend
21
+
`import { Suspender } from 'experimental-react-suspender';`
19
22
20
23
##### Example:
21
24
```
22
-
<Suspender fallback={<MyFallbackComponent />}>
23
-
<Child1 asyncProp={somePromiseHere} regularProp={"I fallback until my data is ready"} />
24
-
<Child2 asyncProp={somePromiseHere} regularProp={"I can render before child1 if my data is ready first"} />
<Child1 asyncProp={axios.get('/user?ID=12345')} regularProp={"I fallback until my data is ready"} />
29
+
<Child2 asyncProp={somePromise} regularProp={"I can render before Child1 if my data is ready first"} />
30
+
<Child3 regularProp={"I render immediately"} />
31
+
</Suspender>
32
+
);
27
33
```
28
34
35
+
## PROPS
36
+
|Property|Type(Default)|Description|
37
+
|--------|-------------|-----------|
38
+
|fallback (required)|React.Element|Component to render while async props are resolved.|
39
+
|axios (optional)|boolean|Sets axios mode which will autmatically extract resolved data from a "data" key.|
40
+
|extractKey (optional)|string|Accepts key as string to be used to extract resolved data by any key provided.|
41
+
|children (required)|React.Element[]|Child components nested inside Suspender. Suspender should not be used without children.|
42
+
43
+
44
+
### IMPORTANT
45
+
##### Suspender should wrap the child components that will be responsible for rendering the data or the entire tree will suspend
46
+
29
47
# How does it work?
30
-
The implementation used here is very basic to give the react community an idea of how to approach the challenges React Conccurent Mode is trying to overcome with suspense. With suspense, the general idea is to throw a Promise as an error when something async has yet to resolve. Suspense will then catch the error, call .then() to resolve the promise, and render a fallback.
48
+
The implementation used here is the basic idea to give the react community an alternative approach that React's Suspense tries to overcome. With suspense, the general idea is to throw a Promise as an error when something async has yet to resolve. Suspense will then catch the error, call .then() to resolve the promise, and render a fallback.
31
49
32
-
Throwing an error to show loading logic just smells to me. It *feels* like an anti-pattern and so I wanted to offer an alternative approach to get people and possible the React team thinking. Suspense is cool because typically, when a component throws an error, it unmounts, to my understanding, Suspense has some complex logic that only unwinds as much as it needs to keeping as much of the React tree mounted as it can.
50
+
Throwing an error to show loading logic just smells. It *feels* like an anti-pattern and so experimental-react-suspender offers an alternative approach to get people and possibly the React team thinking. When a component throws an error it unmounts entirely but this is not so with Suspense. Suspense only unwinds as much as it needs to, keeping as much of the React tree mounted as it can.
33
51
34
-
With Suspender, there are no errors thrown because we as the developers know which components require data fetched outside our app before we even deploy. This means, we should be able to scaffold our application in such a way that follows the fetch-then-render approach while also having some easy to use loading logic. Suspender does this by searching for async props, adding them to a *queue* and resolving them incrementally. As the props resolve, the original element is cloned and the props are overriden with the resolved version.
52
+
With Suspender, there are no errors thrown. Because we know which components require data fetched from outside our app, we should be able to scaffold our application in such a way that follows the fetch-then-render approach while also having some easy to use loading logic. Suspender does this by searching for async props, adding them to a *queue* and resolving them incrementally. As the props resolve, the original element is cloned and the props are overriden with the resolved version.
0 commit comments