# usePromise()

### Functionality Overview:

The `usePromise()` hook simplifies asynchronous operations in functional components.

It manages three states: **result**, **error**, and **loading** with a **refresh** function.

Execute the async tasks with `refresh()` and handle the result, error, and loading states accordingly.

> Here's an example:

```typescript
import { usePromise } from '@magicjs.dev/frontend';
import fetchDataServer from './fetch-data.server';

const MyComponent = () => {
    const { refresh, result, error, loading } = usePromise(fetchData);

    // Execute fetchData when component mounts or whenever needed
    useEffect(() => {
        refresh();
    }, []);

    return (
        <div>
            {
                loading && <p>Loading...</p>
            }
            {
                error && <p>Error: {error.message}</p>
            }
            {
                result && <p>Data: {result}</p>
            }
        </div>
    );
}
```

[Click here to refer GitHub.](https://github.com/skyslit/magicjs.dev/blob/main/packages/frontend/src/use-promise.tsx)