Async computed running

Author: JoviDeCroock

packages/preact/README.md

@@ -189,6 +189,68 @@ function Component() {
 }
 ```
 
+### `useAsyncComputed<T>(compute: () => Promise<T> | T, options?: AsyncComputedOptions)`
+
+A Preact hook that creates a signal that computes its value asynchronously. This is particularly useful for handling async data fetching and other asynchronous operations in a reactive way.
+
+> You can also import `asyncComputed` as a non-hook way
+
+#### Parameters
+
+- `compute`: A function that returns either a Promise or a direct value.
+  Using signals here will track them, when the signal changes it will re-execute `compute`.
+- `options`: Configuration options
+  - `suspend?: boolean`: Whether to enable Suspense support (defaults to true)
+
+#### Returns
+
+An `AsyncComputed<T>` object with the following properties:
+
+- `value: T | undefined`: The current value (undefined while loading)
+- `error: Signal<unknown>`: Signal containing any error that occurred
+- `running: Signal<boolean>`: Signal indicating if the computation is in progress
+
+> When inputs to `compute` change the value and error will be retained but `running` will be `true`.
+
+#### Example
+
+```typescript
+import { useAsyncComputed } from "@preact/signals/utils";
+
+function UserProfile({ userId }: { userId: Signal<string> }) {
+	const userData = useAsyncComputed(
+		async () => {
+			const response = await fetch(`/api/users/${userId.value}`);
+			return response.json();
+		},
+		{ suspend: false }
+	);
+
+	if (userData.running.value) {
+		return <div>Loading...</div>;
+	}
+
+	if (userData.error.value) {
+		return <div>Error: {String(userData.error.value)}</div>;
+	}
+
+	return (
+		<div>
+			<h1>{userData.value?.name}</h1>
+			<p>{userData.value?.email}</p>
+		</div>
+	);
+}
+```
+
+The hook will automatically:
+
+- Recompute when dependencies change (e.g., when `userId` changes)
+- Handle loading and error states
+- Clean up subscriptions when the component unmounts
+- Cache results between re-renders
+- Support Suspense when `suspend: true`
+
 ## License
 
 `MIT`, see the [LICENSE](../../LICENSE) file.

packages/preact/utils/src/index.ts

@@ -84,6 +84,7 @@ interface AugmentedPromise<T> extends Promise<T> {
 interface AsyncComputed<T> extends Signal<T> {
 	value: T;
 	error: Signal<unknown>;
+	running: Signal<boolean>;
 	pending?: AugmentedPromise<T> | null;
 	/** @internal */
 	_cleanup(): void;
@@ -108,8 +109,13 @@ export function asyncComputed<T>(
 ): AsyncComputed<T | undefined> {
 	const out = signal<T | undefined>(undefined) as AsyncComputed<T | undefined>;
 	out.error = signal<unknown>(undefined);
+	out.running = signal<boolean>(false);
 
 	const applyResult = (value: T | undefined, error?: unknown) => {
+		if (out.running.value) {
+			out.running.value = false;
+		}
+
 		if (out.pending) {
 			out.pending.error = error;
 			out.pending.value = value;
@@ -142,10 +148,14 @@ export function asyncComputed<T>(
 					return applyResult(result.value as T);
 				}
 
+				out.running.value = true;
+
 				// Handle async resolution
 				out.pending = result.then(
 					(value: T) => {
-						applyResult(value);
+						if (currentId === computeCounter) {
+							applyResult(value);
+						}
 						return value;
 					},
 					(error: unknown) => {
@@ -156,6 +166,7 @@ export function asyncComputed<T>(
 					}
 				) as AugmentedPromise<T>;
 			} else {
+				out.running.value = false;
 				applyResult(result);
 			}
 		} catch (error) {
@@ -188,6 +199,7 @@ export function useAsyncComputed<T>(
 		const incoming = asyncComputed(() => computeRef.current());
 
 		if (cached) {
+			incoming.running = cached.running;
 			incoming.value = cached.value;
 			incoming.error.value = cached.error.peek();
 			cached._cleanup();

packages/preact/utils/test/browser/index.test.tsx

@@ -160,5 +160,47 @@ describe("@preact/signals-utils", () => {
 			});
 			expect(scratch.innerHTML).to.eq("<p>baz</p>");
 		});
+
+		it("Should apply the 'running' signal", async () => {
+			const AsyncComponent = (props: any) => {
+				const data = useAsyncComputed<{ foo: string }>(
+					async () => fetchResult(props.url.value),
+					{ suspend: false }
+				);
+				const hasData = data.value !== undefined;
+				return (
+					<p>
+						{data.running.value
+							? "running"
+							: hasData
+							? data.value?.foo
+							: "error"}
+					</p>
+				);
+			};
+			const url = signal("/api/foo?id=1");
+			act(() => {
+				render(<AsyncComponent url={url} />, scratch);
+			});
+			expect(scratch.innerHTML).to.eq("<p>running</p>");
+
+			await act(async () => {
+				await resolve({ foo: "bar" });
+				await new Promise(resolve => setTimeout(resolve));
+			});
+
+			expect(scratch.innerHTML).to.eq("<p>bar</p>");
+
+			act(() => {
+				url.value = "/api/foo?id=2";
+			});
+			expect(scratch.innerHTML).to.eq("<p>running</p>");
+
+			await act(async () => {
+				await resolve({ foo: "baz" });
+				await new Promise(resolve => setTimeout(resolve));
+			});
+			expect(scratch.innerHTML).to.eq("<p>baz</p>");
+		});
 	});
 });