#5498·vueuse

`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.