useAsyncFn

Use useAsyncFn when a button or form runs an async action and you need a loading flag, the result or the error, without writing that state yourself.

ExampleCopy Anchor Link

import { useAsyncFn } from '@salla.sa/twilight-theme-engine/hooks/useAsyncFn';

export function SaveForLater({ productId }: { productId: number }) {
  const [state, save] = useAsyncFn(async () => {
    await window.salla?.wishlist.add(productId);
    return true;
  }, [productId]);

  return (
    <button onClick={() => save()} disabled={state.loading}>
      {state.value ? 'Saved' : 'Save for later'}
    </button>
  );
}

It returns a pair: the current state, and a wrapped version of your function. Call the wrapped function to run the action.

APICopy Anchor Link

function useAsyncFn<T extends (...args: never[]) => Promise<unknown>>(
  fn: T,
  deps?: DependencyList,
  initialState?: AsyncState<Awaited<ReturnType<T>>>
): [AsyncState<Awaited<ReturnType<T>>>, T];

The state has loading: boolean, and then value after success or error after failure.

GotchasCopy Anchor Link

• deps defaults to [], so the wrapped function keeps the first fn it saw. Pass every value fn reads, as in the example.
• Only the latest call updates the state. Results of older, slower calls are ignored.
• State is not updated after the component unmounts.

NextCopy Anchor Link

• useWishlist is built on this hook.
• Loading data covers data that belongs in a route loader instead.
• Salla SDK and events lists the Salla.* calls you will wrap.