use-async

🪝 useAsync

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:

useAsync(async () => {
	await Promise.delay(5);
	setState("Hello World!"); // unsafe
});

📕 Parameters

• callback - The async function to run.
• deps - The dependencies to watch for changes. Defaults to an empty array.

📗 Returns

• The result if the promise resolved.
• The status of the promise.
• The error message if the promise rejected or cancelled.

📘 Example

function BaseplatePortal(props: React.PropsWithChildren) {
	const [baseplate] = useAsync(async () => {
		return Workspace.WaitForChild("Baseplate");
	});

	if (!baseplate) {
		return undefined!;
	}

	return createPortal(props.children, baseplate);
}