Development Book V18: Life Cycle

To build a robust and dependable component system, a complete lifecycle management structure is essential. Owl Components provide developers with the tools needed to create dynamic and interactive UI components effectively. Below is an overview of the key stages in the lifecycle of an Owl component:

1. setup

The setup function is triggered immediately after the component is created. Similar to a constructor, it initializes the component, but unlike a constructor, it doesn't accept any arguments. The main purpose of the setup hook is to prepare the component for operation, and it is often used for techniques such as monkey patching or initializing reactive variables.

                        setup() {
  useSetupAutofocus();
}
                       
                       

2.willStart

The willStart hook is an asynchronous lifecycle method that runs before the component’s first render. It is typically used to perform tasks that need to be completed before the UI is displayed, such as fetching data or loading external assets.

This hook is especially helpful when your component depends on resources that must be available from the start, ensuring that everything is properly set up before the component appears on the screen.

                       setup() {
    onWillStart(async () => {
      this.data = await this.loadData()
    });
  }
                       

3.willRender

The willRender hook is triggered just before a component is rendered, precisely when its compiled template function is about to execute. This lifecycle method is useful when you need to run logic or perform adjustments right before the rendering phase begins.

Use willRender when you want to prepare or modify data that directly affects how the template will be displayed.

                       setup() {
    onWillRender(() => {
      // do something
    });
  }
                       

4. rendered

When you need to execute code immediately after a component has been rendered to the DOM, the onRendered hook is the appropriate choice. This hook is called right after the rendering process is complete, making it ideal for tasks such as initializing third-party libraries, applying DOM-related changes, or running animations that require the component to be visible.

                        setup() {
    onRendered(() => {
      // do something
    });
  }

                       

5. mounted

The mounted hook is triggered after the component has been fully rendered and inserted into the DOM. At this point, the component is considered fully active within the document, making it a suitable place to interact directly with the DOM, attach event listeners, or perform operations that require the elements to be present and accessible.

                       setup() {
    onMounted(() => {
      // do something here
    });
  }

                       

6.willUpdateProps

This hook is asynchronous and is triggered whenever the associated component undergoes an update. It is particularly useful when the component has asynchronous tasks that need to be completed during the update process. At this stage, the hook can be used to register and execute the required function.

                        setup() {
    onWillUpdateProps(nextProps => {
      return this.loadData({id: nextProps.id});
    });
  }

                       

7.willPatch

The willPatch hook is executed just before the DOM patching process starts. It is not triggered during the initial render, making it specific to subsequent updates. This hook is useful when you need to read or interact with data from the DOM before it gets modified.

                        setup() {
    onWillPatch(() => {
      this.scrollState = this.getScrollSTate();
    });
  }

                       

8.patched

The patched hook is triggered whenever a component updates its DOM, typically due to changes in its state, props, or environment. It is not called during the initial render. This hook is particularly useful for interacting with the DOM—such as through external libraries—after each update. However, it’s important to note that this hook will not be executed if the component is not present in the DOM.

                        setup() {
    onPatched(() => {
      this.scrollState = this.getScrollSTate();
    });
  }
                       

9. willUnmount

The willUnmount hook is called whenever a component is about to be removed from the DOM. It's a suitable place to clean up, such as removing event listeners or canceling timers. This hook acts as the counterpart to mounted. However, if a component is destroyed before it ever gets mounted, the willUnmount hook may not be triggered.

                       setup() {
    onMounted(() => {
      // add some listener
    });
    onWillUnmount(() => {
      // remove listener
    });
  }

                       

10. willDestroy

Sometimes, components need to handle both setup and cleanup tasks when they become inactive. However, using the willUnmount hook for cleanup isn't always reliable, as it won't be triggered if the component is destroyed before being mounted. In such cases, an alternative approach is needed to ensure proper resource management.

                       setup() {
    onWillDestroy(() => {
      // do some cleanup
    });
  }