useAsyncComputed$

[Varixo]

What is it about?

Create computed signals that can handle asynchronous operations.

Async Computed Signals

The useAsyncComputed$ hook allows you to create computed signals that can handle asynchronous operations. This is useful when you need to compute a value that depends on asynchronous data or operations.

Basic Usage

import { useAsyncComputed$ } from '@qwik.dev/core';

export const MyComponent = component$(() => {
  const asyncValue = useAsyncComputed$(async () => {
    const result = await someAsyncOperation();
    return result;
  });

  return <div>{asyncValue.value}</div>;
});

Features

• Async Computation: The computed function can be asynchronous and return a Promise
• Dependency Tracking: Uses the track function to track dependencies, similar to a useTask$ hook
• Automatic Updates: When dependencies change, the async computation is automatically re-run
• Error Handling: Failed computations are properly handled and can be detected

API

useAsyncComputed$

useAsyncComputed$<T>(qrl: (ctx: AsyncComputedCtx) => Promise<T>): AsyncComputedReadonlySignal<T>

Parameters

• qrl: A QRL that computes the value. It receives a context object with:
  • track: A function to track dependencies
  • cleanup: A function to cleanup the async operation
  • Returns a promise from the async operation

Returns

An AsyncComputedReadonlySignal<T> that:

• Has a value property containing the computed value, because it is a readonly signal
• Has a loading property containing the loading boolean state
• Has an error property containing the error object if the computation failed, or null if successful
• Returns a synchronous signal value that can be used in templates and other synchronous contexts

export interface AsyncComputedReadonlySignal<T = unknown> extends ReadonlySignal<T> {
  loading: boolean;
  error: Error | null;
}

Example with Dependencies

import { useAsyncComputed$, useSignal } from '@qwik.dev/core';

export const MyComponent = component$(() => {
  const searchQuery = useSignal('');

  const searchResults = useAsyncComputed$(async ({ track }) => {
    const query = track(() => searchQuery.value);
    const results = await fetchSearchResults(query);
    return results;
  });

  return (
    <div>
      <input value={searchQuery.value} onInput$={(e) => (searchQuery.value = e.target.value)} />
      <div>{searchResults.value}</div>
    </div>
  );
});

Implementation Details

The async computed signal implementation:

1. Tracks dependencies using the provided track function
2. Can cleanup the async operation using the provided cleanup function
3. Executes the async computation when dependencies change
4. Updates the signal value when the computation completes
5. Handles errors and failed computations
6. Maintains proper reactivity and updates

Migration from useResource$

Deprecation Notice: The useResource$ API will be deprecated.

The useResource$ API will be deprecated in favor of useAsyncComputed$. This new API provides a more intuitive and flexible way to handle asynchronous computations while maintaining the same core functionality. The migration path is straightforward:

// Before (useResource$ with Resource component)
const resource = useResource$(async ({ track }) => {
  const value = track(() => someValue.value);
  return await someAsyncOperation(value);
});

return (
  <Resource
    value={resource}
    onPending={() => <div>Loading...</div>}
    onResolved={(data) => <div>{data}</div>}
    onRejected={(error) => <div>Error: {error.message}</div>}
  />
);

// After (useAsyncComputed$ with signal properties)
const computed = useAsyncComputed$(async ({ track }) => {
  const value = track(() => someValue.value);
  return await someAsyncOperation(value);
});

return (
  <>
    {computed.loading && <div>Loading...</div>}
    {computed.error && <div>Error: {computed.error.message}</div>}
    {!computed.loading && !computed.error && <div>{computed.value}</div>}
  </>
);

Key benefits of migrating to useAsyncComputed$:

• More consistent with the signal-based API design
• Better TypeScript support
• Clearer separation of concerns
• More predictable behavior with async operations

Limitations

• The computation should be idempotent (same inputs should produce same outputs)
• The computation should not have side effects

Future Improvements

• Add support for cancellation of in-flight computations

Feedback

We welcome feedback on this feature. Please let us know:

• What could be improved
• Any additional features you'd like to see

Links / References

No response

[wmertens]

It should be noted that this differs from useTask$+useSignal because the resulting signal never seems to be undefined.

If you try to read the signal while it's still loading, it will throw a Promise and re-render later when the value is known.

Also, we should change Resource so it also accepts this ACS, the given example looks a bit awkward.

const computed = useAsyncComputed$(async ({ track }) => {
  const value = track(() => someValue.value);
  return await someAsyncOperation(value);
});

return (
  <Resource
    value={computed}
    onPending={() => <div>Loading...</div>}
    onResolved={(data) => <div>{data}</div>}
    onRejected={(error) => <div>Error: {error.message}</div>}
  />
);

// also
return (
  <>
    {computed.loading
       ? <div>Loading...</div>
       : computed.error
         ? <div>Error: {computed.error.message}</div>
         : <div>{computed.value}</div>}
  </>
);

It would also be nice to have a "stale while revalidate", meaning the first time it should show "loading" but after that it should only show the computed values. For that, maybe we can add a .resolved property?

const computed = useAsyncComputed$(async ({ track }) => {
  const value = track(() => someValue.value);
  return await someAsyncOperation(value);
});

return (
  <>
    {computed.error
       ? <div>Error: {computed.error.message}</div>
       : computed.resolved
         ? <div>{computed.resolved}</div>
         : <div>Loading...</div>}
  </>
);

[Varixo]

Why do you think resource should accept async computed signal?

Good idea with resolved property

[finalgamer]

I would love to see this

[shairez]

Here's another suggestion for a syntax that is like <Resource> but more like <Slot> in a way:

  <ShowComputed value={computed}>
    
    Hey this is the {computed.value}

    <Error>Oops</Error>
    
    <Loading>Spinner</Loading>

  </ShowComputed>

(it could be named differently, this is just an illustration of the concept)

I like the fact that the state management of the computed value is being handled by a "control flow" component instead of the end user, it's a bit nicer DX in my opinion.

[maiieul]

I think I prefer the Resource syntax with props.

e.g:

  <AsyncComputed
    value={computed}
    onLoad={() => <div>Loading...</div>}
    onResolved={(data) => <div>{data}</div>}
    onError={(error) => <div>Error: {error.message}</div>}
  />

So that would look a lot like <Resource /> but I guess it's better to expose a new Component to avoid confusion and simplify the implementation.

The rigidity avoids having to deal with composition like

  <ShowComputed value={computed}>
    
    Hey this is the {computed.value}

    <Error>Oops</Error>
    
    What should we do about me? // not clear API wise
    
    <Loading>Spinner</Loading>

  </ShowComputed>