Life Cycle
The OWL Components have several ways to help the developers to create interactive and
powerful components. Some of the important methods of the components and the life cycle
of the components are as follows:-
1. setup
The setup is just run after the component construction. It’s similar to the constructor;
the only difference is that setup doesn’t accept any argument. The hooks are called
inside this method. One of the main reasons to have the setup hook in the component
lifecycle is to make it possible to monkey patch it. It is a common need in the Odoo
ecosystem.
setup() {
useSetupAutofocus();
}
2. willStart
To perform some action before the initial rendering of a component, the willStart hook
can be used. Before initial rendering, it will be called exactly once. It is useful in
some cases, for example, to load external assets before the rendering of a component.
The willStart can be also used for loading data from the server. To register a function
at this moment, onWillStart hook is used.
setup() {
onWillStart(async () => {
this.data = await this.loadData()
});
}
If more than one onwillStart registered callback, then they can be run in parallel.
3. willRender
Sometimes, we needs to execute the code just before the component is rendered. To do
that, one can use the onWillRender hook.
setup() {
onWillRender(() => {
// do something
});
}
4. Rendered
Similar to willRender, sometimes we needs to execute the code just after the component is
rendered, we can use the onRender hook.
setup() {
onRendered(() =< {
// do something
});
}
5. mounted
After the initial rendering, each time a component is attached to the DOM the mounted is
called. The component is considered to be Active at this time. The onMounted hook is
called when a component is represented in the UI.
setup() {
onMounted(() => {
// do something here
});
}
6. willUpdateProps
It is an asynchronous hook. When an update is made for the related component, this hook
will be called. If the component needs to perform an asynchronous task depending on the
props this method will be useful. onWillUpdateProps hook will be used to register the
function at this moment.
setup() {
onWillUpdateProps(nextProps => {
return this.loadData({id: nextProps.id});
});
}
7. willPatch
It is called just before the DOM Patching process starts. Useful for reading information
from the DOM. It is not called on the initial render. Modifying state is not allowed
here. onWillPatch hook is used to register the function at this moment.
setup() {
onWillPatch(() => {
this.scrollState = this.getScrollSTate();
});
}
8. patched
When a component does actually update its DOM the patched hook is called. This method is
not also called from the initial render. Whenever the component is patched this method
is useful to interact with the DOM. onPatched hook is used to register the function at
this moment.
setup() {
onPatched(() => {
this.scrollState = this.getScrollSTate();
});
}
9. willUnmount
The willUnmount method is called each time just before a component is unmounted from the
DOM.
setup() {
onMounted(() => {
// add some listener
});
onWillUnmount(() => {
// remove listener
});
}
10. willDestroy
Sometimes, components need to do some action in the setup and clean it up when they are
inactive. The willDestroy hook is useful in that situation.
setup() {
onWillDestroy(() => {
// do some cleanup
});
}