---
# System prepended metadata

title: Handling user actions
tags: [zeta-dom-react]

---

---
tags: zeta-dom-react
---

# Handling user actions

For user action will trigger asynchronous operations, there are commonly a few side effects needed for a rich single-paged application.

Zeta DOM relies on associating a promise object to HTML elements to manage such side effects:


| Function       | Report loading | Report errors | Prevent leaving | `locked` |
| -------------- | --------------- | ------------- | --------------- | ------  |
| `lock`         |                 |               | See Note 1      | `true` |
| `notifyAsync`  | ✓               | ✓             |                 |`false` |
| `preventLeave` |                 |               | ✓               | See Note 2 |

### Notes

1. Calling `lock` on an element will cause `locked` to return true.
   It does not trigger browser's confirmation when leaving the page.
   For SPA, custom handling is required when handling in-page navigation.
2. `preventLeave` will lock an element if that element is given as the first argument.


## Wrapping React events

A generic `onClick` wrapper would be:

```typescript!
function onClick(e: React.UIEvent) {
    const element = e.currentTarget;
    if (!locked(element)) {
        let promise = props.onClick?.(e);
        if (promise instanceof Promise) {
            catchAsync(lock(element, promise, true));
        }
    }
}
```
