`useLoading` | A hook records function's execute state
Author: ZacharyBearCreated Jun 8, 2026Updated Aug 25, 2026
### Clear and concise description of the problem
I want a function is familiar to React's [`useTransition`](https://react.dev/reference/react/useTransition) API.
It wraps a function, provides _pending state_ and wrapped _start function_:
`@/apis/user.js`
```typescript
const fetch = async (userId) => () => {
return await axios.request('/api/user/' + userId)
}
```
Using in Vue SFC:
```vue
Load User Information
Please wait... =)
``` ### Suggested solution Here is an simple implementation wroten by JavaScript and JSDoc. ```js /** * An hook wraps asynchronous function, provides pending state and start function. * Ref to React useTransition: https://zh-hans.react.dev/reference/react/useTransition * * @template {Function} T * @param {T} fn An asynchronous function * @returns {[pending: Ref, start: T]} Wrapped array result * * pending: Is this function running * start: Start run this function */ export const useLoading = (fn) => { const loading = ref(false) const start = async (...params) => { loading.value = true try { return await fn(...params) } catch (e) { console.error(e) throw e } finally { loading.value = false } } return [loading, start] } ``` It allows developers to pass parameters in to the wrapped start function, and will return the promised result to the caller. ### Alternative _No response_ ### Additional context Using an array for the result requires developers to assign names to each part, which helps avoid variable name collisions: ```js const [fetching, fetch] = useLoading(userApi.fetch) const [removing, remove] = useLoading(userApi.remove) const [updating, update] = useLoading(userApi.update) // Other pendings and starts... ``` ### Validations - [x] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md) - [x] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md). - [x] Read the [docs](https://vueuse.org/guide). - [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.Source: vueuse/vueuse