---
title: useTimeout composable
desc: What is useTimeout() composable and how you can use it
---
The `useTimeout()` composable is similar in scope with the native `setTimeout()`, with some key differences. The composable takes care of "cancelling" the timeout if your component gets destroyed or deactivated (keep-alive related) and you can also override the executing Function before the timeout expires.

In other words, if you want to schedule a function after a delay but you might want to override it or even cancel it before the delay happens, this is the composable for you.

> [!TIP]
> On the server-side of SSR or SSG modes, registering a timeout is a no-op. Start server-side work explicitly outside the component rendering lifecycle rather than creating a timer during `setup()`.

## Syntax

```js
import { useTimeout } from 'quasar'

setup () {
  const {
    registerTimeout,
    removeTimeout
  } = useTimeout()

  // ...
}
```

```ts
function useTimeout(): {
  registerTimeout(fn: () => void, delay?: string | number): void
  removeTimeout(): void
}
```

## Example

```js
import { useTimeout } from 'quasar'

setup () {
  const { registerTimeout } = useTimeout()

  function onSomeEvent (param) {
    registerTimeout(() => {
      console.log('param is', param)
    }, 2000) // in 2 seconds
  }

  // ...

  // You can call onSomeEvent() multiple
  // times in a row and only the last
  // registered Function will run when it
  // is time for it

  // Note that the delay is reset each
  // time you register/override the timeout
}
```

Should you need more than one useTimeout() per component, simply rename the functions of the returned object:

```js
const {
  registerTimeout: registerFirstTimeout,
  removeTimeout: removeFirstTimeout
} = useTimeout()

const {
  registerTimeout: registerSecondTimeout,
  removeTimeout: removeSecondTimeout
} = useTimeout()
```