Make sure the promise render prop is always defined (#148)

* Make sure the promise render prop is always a Promise.

* Add a warning about providing a rejection handler.

Author: ghengeveld

README.md

@@ -686,6 +686,9 @@ A reference to the internal wrapper promise created when starting a new promise
 `run` / `reload`). It fulfills or rejects along with the provided `promise` / `promiseFn` / `deferFn`. Useful as a
 chainable alternative to the `onResolve` / `onReject` callbacks.
 
+Warning! If you chain on `promise`, you MUST provide a rejection handler (e.g. `.catch(...)`). Otherwise React will
+throw an exception and crash if the promise rejects.
+
 #### `run`
 
 > `function(...args: any[]): void`

packages/react-async/src/Async.js

@@ -3,7 +3,13 @@ import React from "react"
 import globalScope from "./globalScope"
 import { IfInitial, IfPending, IfFulfilled, IfRejected, IfSettled } from "./helpers"
 import propTypes from "./propTypes"
-import { actionTypes, init, dispatchMiddleware, reducer as asyncReducer } from "./reducer"
+import {
+  neverSettle,
+  actionTypes,
+  init,
+  dispatchMiddleware,
+  reducer as asyncReducer,
+} from "./reducer"
 
 /**
  * createInstance allows you to create instances of Async that are bound to a specific promise.
@@ -32,7 +38,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       this.mounted = false
       this.counter = 0
       this.args = []
-      this.promise = undefined
+      this.promise = neverSettle
       this.abortController = { abort: () => {} }
       this.state = {
         ...init({ initialValue, promise, promiseFn }),

packages/react-async/src/reducer.js

@@ -1,5 +1,7 @@
 import { getInitialStatus, getIdleStatus, getStatusProps, statusTypes } from "./status"
 
+export const neverSettle = new Promise(() => {})
+
 export const actionTypes = {
   start: "start",
   cancel: "cancel",
@@ -16,7 +18,7 @@ export const init = ({ initialValue, promise, promiseFn }) => ({
   finishedAt: initialValue ? new Date() : undefined,
   ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn)),
   counter: 0,
-  promise: undefined,
+  promise: neverSettle,
 })
 
 export const reducer = (state, { type, payload, meta }) => {

packages/react-async/src/useAsync.js

@@ -1,7 +1,13 @@
 import { useCallback, useDebugValue, useEffect, useMemo, useRef, useReducer } from "react"
 
 import globalScope from "./globalScope"
-import { actionTypes, init, dispatchMiddleware, reducer as asyncReducer } from "./reducer"
+import {
+  neverSettle,
+  actionTypes,
+  init,
+  dispatchMiddleware,
+  reducer as asyncReducer,
+} from "./reducer"
 
 const noop = () => {}
 
@@ -12,7 +18,7 @@ const useAsync = (arg1, arg2) => {
   const isMounted = useRef(true)
   const lastArgs = useRef(undefined)
   const lastOptions = useRef(undefined)
-  const lastPromise = useRef(undefined)
+  const lastPromise = useRef(neverSettle)
   const abortController = useRef({ abort: noop })
 
   const { devToolsDispatcher } = globalScope.__REACT_ASYNC__