The owl is a framework from Odoo to meet Odoo’s front end requirements. We have talked about it in the previous section about Odoo OWL Framework. Today, we are going to take a look at what are hooks in the OWL framework and how do we use it.
Hooks are used to reusing stateful logic between components. Hooks are always observed with the Observer class to keep track of what is going on in states and react to their changes.
There are some common hooks used by OWL.
1. useState Hook
2. onMounted
3. onWillUnMount
4. onWillPatch
5. onPatched
6. onWillStart
7. onWillUpdateProps
Let's see each hook in detail
1. useState Hook
useState is one of the most important and common hooks in the owl framework. It has a major role in the feature ‘reactive framework’. This hook helps to render a view when a state of a component is changed. This makes the Owl framework ‘reactive’ as it always listens to the changes occurring in the states of a component.
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++;
}
}
As you can see above, when the value of the state is changed from the function increment(), it renders the template again with the help of useState. We don't want to re-render the template again and again whenever the value of a state is changed. You can see that the state is defined as its value using useState as an object. That is because UseState only accepts a value as an array or object. Since it is the only possible way to react to a state change.
2. onMounted
onMounted hooks register a callback that is called when the owl component is mounted from the virtual DOM to the UI representation(Simply component mounting). In other words, onMounted hook calls when a component is represented in the view.
3.onWillUnMount
onMounted hooks register a callback that is called when the owl component is unmounted from the view.
4.onWillPatch
onMounted hooks register a callback that is called before the component is patched.
5.onPatched
onMounted hooks register a callback that is called after the component is patched.
6.onWillStart
This hook will be called just before the component is rendered for the first time. It will be useful if we need to do some actions before the component is rendered to the view like loading some initial data.
7.onWillUpdateProps
This is also an asynchronous hook which is called whenever an update is made to a related component. The reactive nature of the OWL framework can be maintained using this amazing hook.
Watch our Odoo OWL Framework webinar to know more about Hooks in Odoo OWL