Odoo Web Library(OWL)
Is a web framework developed by Odoo. OWL is used for well-structured, dynamic, and maintainable applications. OWL offers a declarative component system, reactivity with hooks, etc. The Hooks in OWL are a way to factorize the code, even if it depends on the lifecycle of components. Most of the hooks available in OWL are related to the component lifecycle, but some provide a way to develop specific hooks.
Using the render function all the time and handling the reactivity is not a convenient way to use it. For that purpose, Odoo mainly uses some specific hooks.
In this blog, we are going to explain the hooks used in OWL.
Hooks are used to reuse stateful logic between components, it helps to organize the code by feature in complex components, without writing a class able to use the user state in functional components and can work for class components. Hooks are a perfect way to make a component reactive. There is one rule when working with the hooks is that every hook for a component has to be called inside the setup method or in the class fields. There are some hooks related to the lifecycle of OWL Components, some of them are:-
a) onWillStart
b) onWillRender
c) onRendered
d) onMounted
e) onWillUpdateProps
d) onWillPatch
f) onPatched
g) onWillUnmount
h) onWillDestroy
i) onError
onWillStart
willStart is an asynchronous hook that can be used to perform some action before the initial rendering of the component. Called exactly once before the initial render of the component. It can be used to load external assets before rendering the component, and also to load data from a server. For registering a function that can be called before the initial rendering of the component we are using the onWillStart hook. And also if there is more than one onWillStart registered then they will be run in parallel. An example of onWillStart is as follows:-
onWillStart(async () => {
this.data = await this.loadData()
});onWillRender
To execute a code just before a component is rendering the onWillRender hook can be used. It is called before rendering the template.
onRendered
To execute a code just after a component is rendered then the onRendered hook is used. Called just after the rendering of the template.
onMounted
This hook is called every time a component is attached to the DOM after the component is initially rendered. The component is considered as active at this point. To register a function that will be executed when a component is attached to the DOM the onMounted hook is used.
onWillUpdateProps
This hook is called just before setting new props. It is useful in the case the component needs to perform some asynchronous task, depending on the props. To register a function at this point the onWillUpdateProps is used. It is an asynchronous hook.
onWillPatch
It is just called before the DOM patch starts. Useful to read information from the DOM. The onWillPatch is used to register the function at this point.
onPatched
It is called when actually a component did actually update its DOM. Useful to interact with DOM whenever a component is patched.
onWillUnmount
onWillUnmount is a hook called each time just before unmounting a component from the DOM. To remove the listeners we can use this hook. It is the best place to remove the listeners.
onWillDestroy
In some situations, a component needs to do some action inside the setup and need to clean if the component is inactive. The onWillUnmount hook is not suitable for a cleanup operation because the component may be destroyed before mounting. In this situation, onWillDestroy is used.
onError
This is useful when you need to catch and properly respond to errors that occur in some sub-components.
There are some other hooks provided by Odoo:-
1) useState
2) useRef
3) useSubEnv and useSubChildEnv
4) useExternalListener
useState
It is the most important and used hooks for the OWL components. It allows the component to be reactive. Helps to render a view if the state of a component is changed. useState is always listened to the changes in the state of a component. Below given is an example of useState hook:-
const { useState } = owl.hooks;
class Counter extends owl.Component {
static template = xml`
<button t-on-click="increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = useState({ value: 0 });
increment() {
this.state.value++;
}
}The above given code creates a component Counter, which contains a button with the on-click event increment. The template will render again with the help of useState hook, when the value of the state is changed from the increment() function. It is important to note that this hook only works with objects or arrays.
useRef
useRef is used to interact with the inside part of the OWL component. Only works when an HTML element is tagged with the t-ref attribute. For example:-
<div>
<input t-ref="someDiv"/>
<span>hello</span>
</div>
The t-ref directive is also accepting the dynamic values.
useSubEnv and useChildSubEnv
Sometimes the environment is useful to share some information with all components. Sometimes we want to limit the information to a subtree. For eg:-,
class FormComponent extends Component {
setup() {
const model = makeModel();
// model will be available on this.env for this component and all children
useSubEnv({ model });
// someKey will be available on this.env for all children
useChildSubEnv({ someKey: "value" });
}
}Here we have a form view component, here the model will be available on this.env for this component and all its children. When considering the useSubChildEnv hook the someKey will be available on this.env for all the children. It is useful to add some information to the environment in a way that it can be only accessible to its children.
useExternalListener
The useExternalListener is used to add and remove a listener on some target when a component is mounted/ unmounted. As an example,
useExternalListener(window, "click", this.closeMenu);
As the above-given example, the dropdown menu needs to listen to a click event on the window that has to be closed.
useComponent
useComponent hook can be useful as a building block for the custom hooks that may require some reference to the component that calls them.