Learning Owl Framework - Lifecycle Of Component.

A component should usually represent one part of the UI. Components may be mounted, updated, or unmounted. A Component needs a complete lifecycle system to help developers write robust, clean, and maintainable code.

If we are going to define a simple Component that is how we set up its hooks

const { Component } = owl;
const { 
	onWillStart, 
    onWillRender, 
    onMounted, 
    onWillUpdateProps, 
    onWillPatch, 
    onWillUnmount, 
    onWillDestroy, 
    onError, 
} = owl;

class SimpleComponent extends Component {
	  setup() {
        /** Component setup is made here **/
        
        onWillStart(async () => {
        	/** async, before first rendering **/
        })
        
        onWillRender(() => {
        	/** just before component is rendered **/
        })
        
        onRendered(() => {
        	/** just after component is rendered **/
        })
        
        onMounted(() => {
        	/** ust after component is rendered and added to the DOM **/
        })
        
        onWillUpdateProps(async () => {
        	/** async, before props update **/
        })
        
        onPatched(() => {
			/** just after the DOM is patched **/
        })
        
        onWillUnmount(() => {
        	/** just before removing component from DOM **/
        })
        
        onWillDestroy(() => {
        	/** just before component is destroyed **/
        })
        
        onError(() => {
        	/** catch and handle errors **/
        })
    }
}

📑Note hooks functions cannot be called outside setup constructor method.

It makes sense,  Once a component is constructed the hooks methods can be customized in another component if it is well designed in a suitable level of abstraction which will be illustrated with different examples later.

❗The Odoo Owl framework was built by Odoo team to develop and write maintainable components. The philosophy of the design was to build highly abstract and generic components similar to modern frameworks like React, Angular, and Vue.

Given the modern and friendly syntax, it can be written in different Odoo modules and can be customized or monkey patched around according to the business needs.

Each of the hook’s details is well documented in official Owl docs. In this post, we are going to focus more on understanding more stuff about these hooks and how it works, and the most common use cases.

class MyComponent extends Component {
  setup() {
    this.state = useState({ clickCount: this.props.countStart });
    onWillStart(() => console.log('WillStart Hook Method'));
    onWillRender(() => console.log('WillRender Hook Method'));
    onRendered(() => console.log('Rendered Hook Method'));
    onMounted(() => console.log('Mounted Hook Method'));
    onWillUpdateProps(() => console.log('WillUpdateProps Hook Method'));
    onPatched(() => console.log('Patched Hook Method'));
    onWillPatch(() => console.log('WillPatched Hook Method'));
    onWillUnmount(() => console.log('WillMount Hook Method'));
    onWillDestroy(() => console.log('WillDestroy Hook Method'));
  }
}

  static template = xml`
  <div id="app">
    <div class="card">
      <MyComponent/>
    </div>
  </div>
  `;

Let’s observe the complete lifecycle from the point when the component will be starting and preparing the necessary data to initialize till the complete attachment to the DOM is made.

Observing the latest code snippet when it is executed in the browser the output is expected to be:

WillStart Hook Method
WillRender Hook Method
Rendered Hook Method
Mounted Hook Method

The lifecycle system of the previous component in this Effect is:

• willStart

The component is about to start and in this hook, we usually prepare the data that will be used which of course might be asynchronous work like fetching data from the server.

onWillStart(async () => {
	const data = await fetch('/api/endpoint');
})

• willRender

Just before the render, might be similar to willStart in which we do some stuff just before rendering the component.

• Rendered

At this point, these hook is made to do stuff just after the component finishes render. usually after render method is executed.

• Mounted

Meaning the component is completely attached to the DOM and the content is presented and ready to interact with.

📑Note

The term Effect is mentioned and from the previous example the effect was just using the component for the first time.

The lifecycle of a component might be different depending on the effect (interaction, changing component props, using sub-components … etc).

Every owl component goes through the same lifecycle to make sure the reactivity of the component is reliable. the cycle can happen multiple times depending on the Effect, whether it updates the component state or props.

Let’s observe another effect after the previous cycle is completely executed we have a button, whenever we click on this button we update the state of the component (counting the number of clicks).

Plug and Play