Life Cycle
Developers can create interactive and potent components in a variety of ways with the aid of OWL Components. The following are some significant methods for components and their life cycles:-
1. setup
After the construction of the component, the setup will run. The difference between the constructor and setup is that setup does not accept any argument. The hooks are called inside this method to make it possible to monkey patch.
setup() {
useSetupAutofocus();
}
2. willStart
Before the initial rendering of the component, the willStart hook is called to perform some actions. It is useful in some cases to load external assets before the component rendering.
setup() {
onWillStart(async () => {
this.data = await this.loadData()
});
}
3. willRender
To execute code just before the component is rendered. We can use onWillRender hook.
setup() {
onWillRender(() => {
// do something
});
}
4. Rendered
In some cases, we need to execute the code just after the component is rendered. In such cases, we can use the onRender hook.
setup() {
onRendered(() => {
// do something
});
}
5. mounted
After the initial rendering, each time component is attached to DOM, the mounted is called. Only this hook is called when the component is present in the UI.
setup() {
onMounted(() => {
// do something here
});
}
6. willUpdateProps
It is an asynchronous hook. This hook is called when an update is made for the related component. This function will be useful if a component has an asynchronous task that needs to be completed. At this time, the function will be registered using this hook.
setup() {
onWillUpdateProps(nextProps => {
return this.loadData({id: nextProps.id});
});
}
7. willPatch
Before the DOM patching starts, willPatch is triggered. We can use it for reading information from the DOM. On the initial render, it is not called, and modifying the state is not allowed. This hook is used to register the function at this moment.
setup() {
onWillPatch(() => {
this.scrollState = this.getScrollSTate();
});
}
8.patched
Patched hook is called when a component updates its DOM. It is not called from the initial render. This method is useful to interact with the DOM whenever the component is patched. At this moment, onPatched hook is used to register.
setup() {
onPatched(() => {
this.scrollState = this.getScrollSTate();
});
}
9. willUnmount
Before the component is unmounted from DOM, the willUnmount method is called.
setup() {
onMounted(() => {
// add some listener
});
onWillUnmount(() => {
// remove listener
});
}
10. willDestroy
When components are inactive, we need to clean some actions where actions are done on setup.
setup() {
onWillDestroy(() => {
// do some cleanup
});
}