---
# System prepended metadata

title: Disposables
tags: [zeta-dom]

---

---
tags: zeta-dom
---

# Disposables

Disposables is a pattern that for undoable actions, or actions that require cleanups, an parameterless unregister callback is returned for such purpose.

Instead of holding infomation required to undo the action, unregistering callbacks can be easily combined and be passed around.

A common example would be `setTimeout` and `clearTimeout`.

```typescript
import { setTimeout } from "zeta-dom/util";

const dispose = setTimeout(() => { /* ... */ });

// somewhere else
// calling clearTimeout under the hook
dispose();
```

## Combining disposables

Unregistering callback can be combined easily as the signature is identical:

```typescript
import { bind } from "zeta-dom/domUtil";
import { combineFn, setTimeout } from "zeta-dom/util";

const dispose = combineFn(
    setTimeout(() => { /* ... */ }),
    bind(window, 'click', () => { /* ... */ })
);

// somewhere else
// clear scheduled timers and remove event listener together
dispose();
```

## Disposable APIs

The library ships disposable pattern APIs for common DOM actions.

- [Timeouts](/49BKSYRkSw675mnvoeMqIw)
- [Native DOM events](/N3lmGhSQQ868Bg4AQmJvyw)
- [Zeta events](/OcoEfrx8SGS8O1J1FhKhXA)
- [Observables](/fcFC3z5PT3OxLJROGsYAJA)
