asyncEffect

Async effect system with abort, race protection, debounce, throttle, and error handling

asyncEffect

Creates an async side effect that runs when dependencies change. Supports abort signals, race protection, debouncing, throttling, and error handling.

export function asyncEffect( effectFunction: AsyncEffectFunction, dependencies: Array<Signal<unknown> | ComputedSignal<unknown>>, options: AsyncEffectOptions = {}, ): () => void

Example:

// Fetch with abort on cleanup
const query = signal('');
const cleanup = asyncEffect(async (signal) => {
  const response = await fetch(`/api/search?q=${query.get()}`, { signal });
  const data = await response.json();
  results.set(data);
}, [query], { abortable: true });

// Debounced search
asyncEffect(async () => {
  const response = await fetch(`/api/search?q=${searchQuery.get()}`);
  results.set(await response.json());
}, [searchQuery], { debounce: 300 });

// Error handling with retries
asyncEffect(async () => {
  const response = await fetch('/api/data');
  if (!response.ok) throw new Error('Failed to fetch');
  data.set(await response.json());
}, [refreshTrigger], {
  retries: 3,
  retryDelay: 1000,
  onError: (error, retry) => {
    console.error('Fetch failed:', error);
    // Optionally call retry() to retry immediately
  }
});