---
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:

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));
        }
    }
}