Development Book V18: Reactive OWL component

Reactivity in OWL aims to offer a straightforward way to manage component state, ensuring that any changes to the state are automatically reflected in the user interface. OWL achieves this through its reactivity hooks, which trigger UI updates whenever the component’s internal state changes.

For instance, if a user interacts with a component, the interface can immediately respond by updating the displayed message. This is possible because the reactivity system tracks state changes and re-renders the component as needed.

To implement reactivity in an OWL component, you start by importing the useState hook and then proceed with defining and updating the state as required.

                       const { Component, whenReady, xml, mount, useState } = owl; 
                       

Next, define the component using the useState hook as shown below:

    class Counter extends Component {
    static template = xml`
        <div class="bg-info text-center p-2">
            <i class="fa fa-arrow-left p-1" style="cursor: pointer;" t-on-click="onPrevious"> </i>
            <b t-esc="messageList[Math.abs(state.currentIndex%4)]"/>
            <i class="fa fa-arrow-right p-1" style="cursor: pointer;" t-on-click="onNext"> </i>
            <i class="fa fa-close p-1 float-right" style="cursor: pointer;" t-on-click="onRemove"> </i>
        </div>`
}
    

Then, include the constructor() method to initialize the component. This method is used to set up the component’s properties and call the parent constructor using super().

                        constructor() {
super(...arguments);
this.messageList = [
    'Hello World',
    'Welcome to Odoo',
    'Odoo is awesome',
    'You are awesome too'
];
this.state = useState({ currentIndex: 0 });
}
                       

We define the methods to handle click events directly within the component, as shown below:

                        onNext(ev) {
   this.state.currentIndex++;
}
onPrevious(ev) {
   this.state.currentIndex--;
}
                       

In this example, we imported the useState hook to manage the component's state. The next step involves defining the component's template, where we included a message along with left and right navigation arrows. When an instance of the component is created, the constructor method is executed. Inside it, we assigned a list of messages to a variable and initialized the state using useState. This setup makes our OWL component reactive. The state holds the current index, and the interface updates automatically whenever the state changes. The onNext() and onPrevious() methods are used to update this index. The output will display a message that changes as the user interacts with the arrows.