Skip to content

Use the watch parameter in useAsync example code #308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

Use the watch parameter in useAsync example code #308

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions docs/guide/async-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const fetchPerson = async ({ id }, { signal }) => {
}

const Person = ({ id }) => {
const { data, error } = useAsync({ promiseFn: fetchPerson, id })
const { data, error } = useAsync({ promiseFn: fetchPerson, watch: id, id })
if (error) return error.message
if (data) return `Hi, my name is ${data.name}!`
return null
Expand All @@ -74,7 +74,8 @@ Notice the incoming parameters to `fetchPerson`. The `promiseFn` will be invoked
`AbortController`. `props` are the options you passed to `useAsync`, which is why you can access the `id` property
using [object destructuring]. The `AbortController` is created by React Async to enable [abortable fetch], so the
underlying request will be aborted when the promise is cancelled (e.g. when a new one starts or we leave the page). We
have to pass its `AbortSignal` down to `fetch` in order to wire this up.
have to pass its `AbortSignal` down to `fetch` in order to wire this up. Last, we pass `id` as the value of the
`watch` parameter so that the promise is invoked again when the id changes.

[states and fates]: https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md
[object destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
Expand Down