React async

README.md

@@ -15,3 +15,12 @@ Since the state hasn't been removed since it had been captured by the effect, th
 take a note in the effect that you're currently mounted.
 If you're unmounted the effects returned callback is called. Set the unmount state there.
 Check in the promise resolution if we're already unmounted and dismiss the effect without changing state.
+
+# react async solution
+
+comes with lots of options how to express yourself: https://docs.react-async.com/getting-started/usage  
+`PageOne`: demo with a `useAsync` hook  
+`PageTwo`: demo with context based Async components  
+(more in the docs)
+
+React Async claims to be fully compatible to React Suspense / Concurrent React once it has landed.

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
+    "react-async": "^10.0.1",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/PageOne.js

@@ -1,19 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
+import { useAsync } from "react-async"
 
-function aVeryHeavyAsyncApiCall(thatRunsForMilliSeconds) {
+function aVeryHeavyAsyncApiCall({thatRunsForMilliSeconds}) {
   return new Promise((resolve, reject) => {
-    setTimeout(() => resolve("hey, Im done!"), thatRunsForMilliSeconds);
+    setTimeout(() => resolve(`hey, I ran ${thatRunsForMilliSeconds}ms!`), thatRunsForMilliSeconds);
   })
 }
 
 function PageOne() {
-  const [apiResult, setApiResult] = useState();
-
-  useEffect(() => {
-    aVeryHeavyAsyncApiCall(3000).then(result => {
-      setApiResult(result)
-    })
-  }, []) 
+
+  const { data: apiResult } = useAsync({ promiseFn: aVeryHeavyAsyncApiCall, thatRunsForMilliSeconds: 3000 })
 
   return (
     <div>

src/PageTwo.js

@@ -1,11 +1,29 @@
 import React from 'react';
+import Async from "react-async"
+
+function aVeryHeavyAsyncApiCall({thatRunsForMilliSeconds}) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve(`hey, I ran ${thatRunsForMilliSeconds}ms!`), thatRunsForMilliSeconds);
+  })
+}
 
 function PageTwo() {
+
   return (
     <div>
       Hi Im Page 2
+      <Async promiseFn={aVeryHeavyAsyncApiCall} thatRunsForMilliSeconds={3000}>
+        <Async.Pending>
+          <div>waiting......</div>
+        </Async.Pending>
+        <Async.Fulfilled>
+          {data => (
+            <div>{data}</div>
+          )}
+        </Async.Fulfilled>
+      </Async>
     </div>
   );
 }
 
-export default PageTwo;
+export default PageTwo;

yarn.lock

@@ -8599,6 +8599,11 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-async@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/react-async/-/react-async-10.0.1.tgz#575c083f808303d2f6ca52d11ec7554dbdbd9fcd"
+  integrity sha512-ORUz5ca0B57QgBIzEZM5SuhJ6xFjkvEEs0gylLNlWf06vuVcLZsjIw3wx58jJkZG38p+0nUAxRgFW2b7mnVZzA==
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"