Lifecycle Hooks
This page covers when each hook in the when option fires, what it receives, and how to cancel a render.
Syntax
const app = new QUI({
id: "app",
data: { count: 0 },
when: {
beforeRender: () => {},
rendered: (sec) => console.log("rendered in", sec),
beforeUpdate: () => app.data.count < 10,
updated: (sec) => console.log("updated in", sec),
},
});
Hook List
| Hook | Fires | Argument | Returning false |
|---|---|---|---|
beforeRender |
Before the initial render | None | Cancels the initial render; the raw template stays on screen |
rendered |
After the initial render reaches the DOM | Duration in seconds | No effect |
beforeUpdate |
After a data change and the 300 ms debounce | None | Cancels this update |
updated |
After the update reaches the DOM | Duration in seconds | No effect |
beforeDestroy |
Never fires in the current version | None | None |
destroyed |
Never fires in the current version | None | None |
beforeDestroy and destroyed are accepted, but QUI has no public destroy method, so they are never called.
Rules
| Rule | Description |
|---|---|
| Cancelling | Only a synchronous false cancels; an async function returns a Promise and cannot cancel |
| Update debounce | Multiple writes within 300 ms trigger beforeUpdate / updated once |
| Reading data | app.data is ready from rendered onward, see Reactive Data |
Legacy Forms
Hooks placed in a lifecycle object, at the top level of the options, or named in snake_case such as before_render, before_update and before_destroy still work but are planned for removal in 1.0.0; see Deprecations.