Skip to content

Commit 39158f6

Browse files
committed
Update README.
1 parent 05deea1 commit 39158f6

File tree

1 file changed

+13
-9
lines changed

1 file changed

+13
-9
lines changed

README.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const MyComponent = () => (
160160

161161
> Similarly, this allows you to set default `onResolve` and `onReject` callbacks.
162162
163-
As a hook with `useAsync` (currently [only in React v16.7.0-alpha](https://reactjs.org/hooks)):
163+
As a hook with `useAsync` (currently [only in React v16.7.0-alpha](https://reactjs.org/hooks); API is subject to change):
164164

165165
```js
166166
import { useAsync } from "react-async"
@@ -194,7 +194,7 @@ const MyComponent = () => {
194194
}
195195
```
196196

197-
The shorthand version does not support passing additional props.
197+
The shorthand version currently does not support passing additional props.
198198

199199
## API
200200

@@ -203,7 +203,7 @@ The shorthand version does not support passing additional props.
203203
`<Async>` takes the following properties:
204204

205205
- `promiseFn` {(props, controller) => Promise} A function that returns a promise; invoked in `componentDidMount` and `componentDidUpdate`; receives component props (object) and AbortController instance as arguments
206-
- `deferFn` {(...args, props, controller) => Promise} A function that returns a promise; invoked only by calling `run`, with arguments being passed through, as well as component props (object) and AbortController as final arguments
206+
- `deferFn` {(...args, props, controller) => Promise} A function that returns a promise; invoked only by calling `run(...args)`, with arguments being passed through, as well as component props (object) and AbortController as final arguments
207207
- `watch` {any} Watches this property through `componentDidUpdate` and re-runs the `promiseFn` when the value changes (`oldValue !== newValue`)
208208
- `initialValue` {any} initial state for `data` or `error` (if instance of Error); useful for server-side rendering
209209
- `onResolve` {Function} Callback function invoked when a promise resolves, receives data as argument
@@ -225,20 +225,22 @@ The shorthand version does not support passing additional props.
225225
- `isLoading` {boolean} `true` while a promise is pending
226226
- `startedAt` {Date} when the current/last promise was started
227227
- `finishedAt` {Date} when the last promise was resolved or rejected
228-
- `cancel` {Function} ignores the result of the currently pending promise
228+
- `cancel` {Function} ignores the result of the currently pending promise and calls `abort()` on the AbortController
229229
- `run` {Function} runs the `deferFn`, passing any arguments provided
230230
- `reload` {Function} re-runs the promise when invoked, using the previous arguments
231231
- `setData` {Function} sets `data` to the passed value, unsets `error` and cancels any pending promise
232232
- `setError` {Function} sets `error` to the passed value and cancels any pending promise
233233

234-
### `useAsync`
234+
### `useAsync` (API may change until Hooks are officially released)
235235

236236
The `useAsync` hook accepts an object with the same props as `<Async>`. Alternatively you can use the shorthand syntax:
237237

238238
```js
239239
useAsync(promiseFn, initialValue)
240240
```
241241

242+
Note that the `useAsync` API is subject to change while Hooks are not officially released.
243+
242244
## Examples
243245

244246
### Basic data fetching with loading indicator, error state and retry
@@ -277,6 +279,8 @@ class App extends Component {
277279
### Using `deferFn` to trigger an update (e.g. POST / PUT request)
278280

279281
```js
282+
const subscribeToNewsletter = (event, props, controller) => fetch(...)
283+
280284
<Async deferFn={subscribeToNewsletter}>
281285
{({ error, isLoading, run }) => (
282286
<form onSubmit={run}>
@@ -314,14 +318,14 @@ const updateAttendance = attend => fetch(...).then(() => attend, () => !attend)
314318
```js
315319
static async getInitialProps() {
316320
// Resolve the promise server-side
317-
const sessions = await loadSessions()
318-
return { sessions }
321+
const customers = await loadCustomers()
322+
return { customers }
319323
}
320324

321325
render() {
322-
const { sessions } = this.props // injected by getInitialProps
326+
const { customers } = this.props // injected by getInitialProps
323327
return (
324-
<Async promiseFn={loadSessions} initialValue={sessions}>
328+
<Async promiseFn={loadCustomers} initialValue={customers}>
325329
{({ data, error, isLoading, initialValue }) => { // initialValue is passed along for convenience
326330
if (isLoading) {
327331
return <div>Loading...</div>

0 commit comments

Comments
 (0)