A full lifecycle system is necessary for a reliable and strong
component system in order to assist developers in writing
components. With the help of OWL Components, developers can
design powerful and interactive components in a variety of
ways. The lifecycle of an Owl component is described in full
below:
1. setup
The setup process begins as soon as the component is
constructed. It's a lifecycle method, the same as the
constructor, with the exception that it doesn't take an
argument. The purpose of the component lifecycle's setup hook
is to enable monkey patching.
setup() {
useSetupAutofocus();
}
2. willStart
willStart is an asynchronous hook that can be used to act
(usually asynchronous) before a component's initial rendering.
The willStart hook is called to perform certain actions before
the component's initial rendering. Sometimes it is useful to
load external assets before a component renders.
setup() {
onWillStart(async () => {
this.data = await this.loadData()
});
}
3. willRender
Sometimes, there might be a need to execute code right before
a component gets rendered, specifically when its compiled
template function is about to run. In such cases, the
onWillRender hook can be utilized.
setup() {
onWillRender(() => {
// do something
});
}
4. Rendered
Sometimes the code needs to run just after the component is
rendered. We can use the onRender hook in these situations.
setup() {
onRendered(() => {
// do something
});
}
5. mounted
Every time a component is added to the DOM, following the
first rendering, the mounted hook is triggered. The component
is regarded as active at this time. This is a good place for
adding listeners, or if the component has to do something like
perform a measure, to interact with the DOM.
setup() {
onMounted(() => {
// do something here
});
}
6. willUpdateProps
This hook is asynchronous. When an update is made for the
associated component, this hook is triggered. If a component
has an asynchronous task that needs to be finished, this
function will come in handy. This hook will now be used to
register the function.
setup() {
onWillUpdateProps(nextProps => {
return this.loadData({id: nextProps.id});
});
}
7. willPatch
The willPatch hook is invoked immediately before the DOM
patching procedure begins. The first render does not call it.
To read data from the DOM, this is helpful.
setup() {
onWillPatch(() => {
this.scrollState = this.getScrollSTate();
});
}
8. patched
When a component actually updates its DOM, the patched hook is
invoked (perhaps through a change in its state/props or
environment). The first render does not invoke this procedure.
Interacting with the DOM (via an external library, for
instance) is beneficial each time the component is patched.
Note that this hook will not be called if the component is not
in the DOM.
setup() {
onPatched(() => {
this.scrollState = this.getScrollSTate();
});
}
9. willUnmount
The willUnmount hook is triggered each time a component is
about to be unmounted from the DOM. . For example, it's a good
place to remove listeners. The willUnmount method serves as
the counterpart to mounted. It's important to note that if a
component is destroyed prior to being mounted, the willUnmount
method might not get invoked.
setup() {
onMounted(() => {
// add some listener
});
onWillUnmount(() => {
// remove listener
});
}
10. willDestroy
At times, components require performing setup actions and
cleaning them up when they're inactive. However, the
willUnmount hook isn't suitable for the cleanup task because
the component might be destroyed before it's even been
mounted.
setup() {
onWillDestroy(() => {
// do some cleanup
});
}