useAsync()

useAsync<T, E>(asyncFunction, immediate?): object

Defined in: src/hooks/async/useAsync.ts:42

A custom React hook to handle asynchronous functions with state management for loading, error, and result. Useful for API calls or other asynchronous operations.

Type Parameters

T

T

The type of the result returned by the asynchronous function.

E

E = Error

The type of the error (defaults to Error).

Parameters

asyncFunction

() => Promise<T>

The asynchronous function to execute.

immediate?

boolean = true

Whether to execute the function immediately upon hook initialization.

Returns

object

An object containing:

• execute: A function to trigger the async operation manually.
• loading: A boolean indicating whether the async operation is in progress.
• error: An error object if the operation fails.
• result: The result of the successful async operation.

execute()

execute: () => Promise<void>

Returns

Promise<void>

loading

loading: boolean

error

error: null | E

result

result: null | T

Example

import { useAsync } from '@zl-asica/react';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) throw new Error('Failed to fetch data');
  return response.json();
};

const MyComponent = () => {
  const { execute, loading, error, result } = useAsync(fetchData, true);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>Result: {JSON.stringify(result)}</div>;
};