Make a clear distinction between 'state' and 'options' by avoiding 'props'.

Author: ghengeveld

Diff for: docs/_summary.md

@@ -12,5 +12,5 @@
 
 - [Interfaces](interfaces.md)
 - [Configuration options](options.md)
-- [Render props](props.md)
+- [State properties](state.md)
 - [Helper components](helpers.md)

Diff for: docs/interfaces.md

@@ -4,17 +4,17 @@ React Async provides several ways to use it. The classic interface is through th
 backwards compatible to React v16.3. More recent React applications will be using hooks, of which two are provided:
 `useAsync` and `useFetch`. Functionally, `<Async>` and `useAsync` are equivalent. `useFetch` is a special type of `useAsync` which is tied to the native `fetch` API.
 
-React Async accepts a wide range of [configuration options](options.md) and returns a set of [render props](props.md).
+React Async accepts a wide range of [configuration options](options.md) and returns a set of [state props](state.md).
 The way you use these differs slightly between the `useAsync` and `useFetch` hooks, and the `<Async>` component.
 
 ## `Async` component
 
 ```jsx
-<Async {...options}>{props => ...}</Async>
+<Async {...options}>{state => ...}</Async>
 ```
 
 - [`options`](options.md) Configuration options
-- [`props`](props.md) Render props object
+- [`state`](state.md) State object
 
 > We recommend that you pass the options individually, rather than using JSX [spread attributes]. React Async uses
 > [render props] to return its state back to you, so it can be used by other components further down the tree.
@@ -25,24 +25,24 @@ The way you use these differs slightly between the `useAsync` and `useFetch` hoo
 ## `useAsync` hook
 
 ```js
-const props = useAsync(options)
+const state = useAsync(options)
 ```
 
-- [`props`](props.md) Render props object
+- [`state`](state.md) State object
 - [`options`](options.md) Configuration options
 
-> We recommend that you pass `options` as an inline object literal, and that you [destructure] the `props` object to
+> We recommend that you pass `options` as an inline object literal, and that you [destructure] the `state` object to
 > extract the properties you need, unless you have multiple instances in the same component.
 
 [destructure]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
 
 ## `useFetch` hook
 
 ```js
-const props = useFetch(resource, init, options)
+const state = useFetch(resource, init, options)
 ```
 
-- [`props`](props.md) Render props object
+- [`state`](state.md) State object
 - [`resource`][fetch api] The resource you want to fetch
 - [`init`][fetch api] Custom request options
 - [`options`](options.md) Configuration options
@@ -55,8 +55,8 @@ Besides using the `Async` component directly, you can also create your own insta
 with options, e.g. to enable global error handling.
 
 ```js
-const CustomAsync = createInstance(defaultProps, displayName)
+const CustomAsync = createInstance(defaultOptions, displayName)
 ```
 
-- [`defaultProps`](props.md) Render props object
+- [`defaultOptions`](options.md) Default configuration options
 - `displayName` Name for this instance, used by React DevTools

Diff for: docs/props.md renamed to docs/state.md

@@ -1,4 +1,4 @@
-# Render props
+# State properties
 
 These are returned in an object by `useAsync()` or provided by `<Async>` as render props to the `children` function:
 

Diff for: docs/usage.md

@@ -124,7 +124,7 @@ const loadPlayer = async ({ playerId }, { signal }) => {
   return res.json()
 }
 
-// createInstance takes a defaultProps object and a displayName (both optional)
+// createInstance takes a defaultOptions object and a displayName (both optional)
 const AsyncPlayer = createInstance({ promiseFn: loadPlayer }, "AsyncPlayer")
 
 const MyComponent = () => (

Diff for: packages/react-async/src/Async.js

@@ -15,7 +15,7 @@ import {
  * createInstance allows you to create instances of Async that are bound to a specific promise.
  * A unique instance also uses its own React context for better nesting capability.
  */
-export const createInstance = (defaultProps = {}, displayName = "Async") => {
+export const createInstance = (defaultOptions = {}, displayName = "Async") => {
   const { Consumer, Provider } = React.createContext()
 
   class Async extends React.Component {
@@ -32,8 +32,8 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       this.setError = this.setError.bind(this)
 
       const promise = props.promise
-      const promiseFn = props.promiseFn || defaultProps.promiseFn
-      const initialValue = props.initialValue || defaultProps.initialValue
+      const promiseFn = props.promiseFn || defaultOptions.promiseFn
+      const initialValue = props.initialValue || defaultOptions.initialValue
 
       this.mounted = false
       this.counter = 0
@@ -51,11 +51,11 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
         setData: this.setData,
         setError: this.setError,
       }
-      this.debugLabel = props.debugLabel || defaultProps.debugLabel
+      this.debugLabel = props.debugLabel || defaultOptions.debugLabel
 
       const { devToolsDispatcher } = globalScope.__REACT_ASYNC__
-      const _reducer = props.reducer || defaultProps.reducer
-      const _dispatcher = props.dispatcher || defaultProps.dispatcher || devToolsDispatcher
+      const _reducer = props.reducer || defaultOptions.reducer
+      const _dispatcher = props.dispatcher || defaultOptions.dispatcher || devToolsDispatcher
       const reducer = _reducer
         ? (state, action) => _reducer(state, action, asyncReducer)
         : asyncReducer
@@ -73,14 +73,14 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     componentDidUpdate(prevProps) {
-      const { watch, watchFn = defaultProps.watchFn, promise, promiseFn } = this.props
+      const { watch, watchFn = defaultOptions.watchFn, promise, promiseFn } = this.props
       if (watch !== prevProps.watch) {
         if (this.counter) this.cancel()
         return this.load()
       }
       if (
         watchFn &&
-        watchFn({ ...defaultProps, ...this.props }, { ...defaultProps, ...prevProps })
+        watchFn({ ...defaultOptions, ...this.props }, { ...defaultOptions, ...prevProps })
       ) {
         if (this.counter) this.cancel()
         return this.load()
@@ -124,24 +124,24 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
 
     load() {
       const promise = this.props.promise
-      const promiseFn = this.props.promiseFn || defaultProps.promiseFn
+      const promiseFn = this.props.promiseFn || defaultOptions.promiseFn
       if (promise) {
         this.start(() => promise)
           .then(this.onResolve(this.counter))
           .catch(this.onReject(this.counter))
       } else if (promiseFn) {
-        const props = { ...defaultProps, ...this.props }
+        const props = { ...defaultOptions, ...this.props }
         this.start(() => promiseFn(props, this.abortController))
           .then(this.onResolve(this.counter))
           .catch(this.onReject(this.counter))
       }
     }
 
     run(...args) {
-      const deferFn = this.props.deferFn || defaultProps.deferFn
+      const deferFn = this.props.deferFn || defaultOptions.deferFn
       if (deferFn) {
         this.args = args
-        const props = { ...defaultProps, ...this.props }
+        const props = { ...defaultOptions, ...this.props }
         return this.start(() => deferFn(args, props, this.abortController)).then(
           this.onResolve(this.counter),
           this.onReject(this.counter)
@@ -150,7 +150,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     cancel() {
-      const onCancel = this.props.onCancel || defaultProps.onCancel
+      const onCancel = this.props.onCancel || defaultOptions.onCancel
       onCancel && onCancel()
       this.counter++
       this.abortController.abort()
@@ -160,7 +160,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     onResolve(counter) {
       return data => {
         if (this.counter === counter) {
-          const onResolve = this.props.onResolve || defaultProps.onResolve
+          const onResolve = this.props.onResolve || defaultOptions.onResolve
           this.setData(data, () => onResolve && onResolve(data))
         }
         return data
@@ -170,7 +170,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     onReject(counter) {
       return error => {
         if (this.counter === counter) {
-          const onReject = this.props.onReject || defaultProps.onReject
+          const onReject = this.props.onReject || defaultOptions.onReject
           this.setError(error, () => onReject && onReject(error))
         }
         return error

Diff for: packages/react-async/src/Async.spec.js

@@ -220,7 +220,7 @@ describe("createInstance", () => {
     expect(onResolve).toHaveBeenCalledWith("done")
   })
 
-  test("accepts watchFn from defaultProps and passes the defaultProps along", async () => {
+  test("accepts watchFn from defaultOptions and passes the defaultOptions along", async () => {
     const promiseFn = () => resolveTo("done")
     const watchFn = jest.fn()
     const CustomAsync = createInstance({ promiseFn, watchFn })
@@ -245,7 +245,7 @@ describe("createInstance", () => {
     await findByText("resolved")
   })
 
-  test("custom instance also passes defaultProps to deferFn", async () => {
+  test("custom instance also passes defaultOptions to deferFn", async () => {
     const deferFn = jest.fn().mockReturnValue(resolveTo())
     const CustomAsync = createInstance({ deferFn })
 

Diff for: packages/react-async/src/index.d.ts

@@ -166,7 +166,7 @@ export namespace Async {
 }
 
 export function createInstance<T>(
-  defaultProps?: AsyncProps<T>,
+  defaultOptions?: AsyncProps<T>,
   displayName?: string
 ): (new () => Async<T>) & {
   Initial<T>(props: { children?: InitialChildren<T>; persist?: boolean }): JSX.Element