Make sure the promise render prop is always a Promise.

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__