@rbxts/pretty-react-hooks
Version:
Useful hooks for @rbxts/react
51 lines (38 loc) • 1.31 kB
Markdown
```ts
function useAsync<T>(
callback: () => Promise<T>,
deps: unknown[] = [],
): [result?: T, status?: Promise.Status, message?: unknown];
```
A hook that runs an async function and returns the result and status. Similar to `useAsyncCallback`, but the callback is run on mount and whenever the dependencies change.
Changing the dependencies will cancel any pending promises and start a new one.
> **Warning:**
> Cancelling a promise that yielded using `await` does not prevent the thread from resuming.
> Avoid pairing `await` with functions that update state, as it might resume after unmount:
>
> ```ts
> useAsync(async () => {
> await Promise.delay(5);
> setState("Hello World!"); // unsafe
> });
> ```
- `callback` - The async function to run.
- `deps` - The dependencies to watch for changes. Defaults to an empty array.
- The result if the promise resolved.
- The status of the promise.
- The error message if the promise rejected or cancelled.
```tsx
function BaseplatePortal(props: React.PropsWithChildren) {
const [baseplate] = useAsync(async () => {
return Workspace.WaitForChild("Baseplate");
});
if (!baseplate) {
return undefined!;
}
return createPortal(props.children, baseplate);
}
```