Skip to content

Commit 3dea75c

Browse files
Update README.md
1 parent a97467f commit 3dea75c

1 file changed

Lines changed: 31 additions & 13 deletions

File tree

README.md

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
# 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
33

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?
410
experimental-react-suspender exports one component "Suspender". Suspender is responsible for doing an array of things..it will
511
1) Look for async props passed to any of its children
612
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
1218
`npm install experimental-react-suspender`
1319

1420
## 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';`
1922

2023
##### Example:
2124
```
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"} />
25-
<Child3 regularProp={"I render immediately"} />
26-
</Suspender>
25+
const somePromise = axios.get('/posts?ID=1234');
26+
return (
27+
<Suspender fallback={<MyFallbackComponent />} axios>
28+
<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+
);
2733
```
2834

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+
2947
# 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.
3149

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.
3351

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.
3553

3654
# Demo
3755

0 commit comments

Comments
 (0)