What is Hooks in Odoo 16 OWL Framework

For handling the front end, Odoo uses the Owl framework. The Odoo Web Library is a framework from Odoo that meets  Odoo’s fall front-end requirements. In this blog, we will look at what hooks are in the OWL framework and how we use them.

Owl hooks are a way to factorize code, even depending on the lifecycle of certain components. Most hooks provided by Owl are related to a component's lifecycle, but some provide a way to build specific hooks. Using these hooks, we can possibly build many customized hooks that help to solve many problems or make some common tasks easier.  Let us discuss some of the common hooks that we used in Odoo 16.

* use assets

* useAutofocus

* useful

* usePager

deposition

use assets:

useAssets is used to load assets. If we need to load some assets in their onWillStart we can use these hooks. It internally calls loadAssets. The location of the asset is @web/core/utils/hooks. 

So first import this.

import { loadJS } from "@web/core/assets";

Then we can use this by this way.

await loadJS("/partner_autocomplete/static/lib/jsvat.js");

useAutofocus:

Focus an element referenced by t-ref=”autofocus” on the current element when it appears in the DOM, if it has not been displayed before.

Location: @web/core/utils/hooks

First we need to import useAutofocus.

import { useAutofocus } from "@web/core/utils/hooks";	

Define the template like this. Add t-ref as autofocus in the input field

<t t-name="Comp" owl="1">
  <input t-ref="autofocus" type="text"/>
</t>

Then we will create a component for this.

class Comp {
  setup() {
    this.inputRef = useAutofocus();
  }
  static template = "Comp";
}

useBus

This is used to add or clear an event listener to a bus.This hook ensures that the listener 

is properly cleared while the component is unmounted.First, we need to import the useBus.

Definition: useBus(bus, eventName, callback)

Arguments: 

bus - the target event bus.

eventName - name of the event.

callback - listener callback function.

import { useBus } from "@web/core/utils/hooks";

class MyComponent {
  setup() {
    useBus(this.env.bus, "some-event", event => {
      console.log(event);
    });
  }
}

usePager

This is used to display the pager of the control panel of a view.

Definition:  usePager(getPagerProps)

Arguments: getPagerProps- it is a function that returns pager props

First we need to import usePager

import { usePager } from "@web/search/pager_hook";

class CustomView {
  setup() {
    const state = owl.hooks.useState({
      offset: 0,
      limit: 80,
      total: 50,
    });
    usePager(() => {
      return {
        offset: this.state.offset,
        limit: this.state.limit,
        total: this.state.total,
        onUpdate: (newState) => {
          Object.assign(this.state, newState);
        },
      };
    });
  }
}

import { usePosition } from "@web/core/position_hook";

class MyPopover extends owl.Component {
  setup() {
    // Here, the reference is the target props, which is an HTMLElement
    usePosition(this.props.target);
  }
}
MyPopover.template = owl.tags.xml`
  <div t-ref="popper">
    I am positioned through a wonderful hook!
  </div>
`;