Development Book V17: Life Cycle

A full lifecycle system is necessary for a reliable and strong component system in order to assist developers in writing components. With the help of OWL Components, developers can design powerful and interactive components in a variety of ways. The lifecycle of an Owl component is described in full below:

1. setup

The setup process begins as soon as the component is constructed. It's a lifecycle method, the same as the constructor, with the exception that it doesn't take an argument. The purpose of the component lifecycle's setup hook is to enable monkey patching.


                        setup() {
                          useSetupAutofocus();
                        }
                        

2. willStart

willStart is an asynchronous hook that can be used to act (usually asynchronous) before a component's initial rendering. The willStart hook is called to perform certain actions before the component's initial rendering. Sometimes it is useful to load external assets before a component renders.


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

3. willRender

Sometimes, there might be a need to execute code right before a component gets rendered, specifically when its compiled template function is about to run. In such cases, the onWillRender hook can be utilized.

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

4. Rendered

Sometimes the code needs to run just after the component is rendered. We can use the onRender hook in these situations.

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

5. mounted

Every time a component is added to the DOM, following the first rendering, the mounted hook is triggered. The component is regarded as active at this time. This is a good place for adding listeners, or if the component has to do something like perform a measure, to interact with the DOM.

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

6. willUpdateProps

This hook is asynchronous. When an update is made for the associated component, this hook is triggered. If a component has an asynchronous task that needs to be finished, this function will come in handy. This hook will now be used to register the function.

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

7. willPatch

The willPatch hook is invoked immediately before the DOM patching procedure begins. The first render does not call it. To read data from the DOM, this is helpful.

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

                            
                        

8. patched

When a component actually updates its DOM, the patched hook is invoked (perhaps through a change in its state/props or environment). The first render does not invoke this procedure. Interacting with the DOM (via an external library, for instance) is beneficial each time the component is patched. Note that this hook will not be called if the component is not in the DOM.

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

9. willUnmount

The willUnmount hook is triggered each time a component is about to be unmounted from the DOM. . For example, it's a good place to remove listeners. The willUnmount method serves as the counterpart to mounted. It's important to note that if a component is destroyed prior to being mounted, the willUnmount method might not get invoked.

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

                            
                        

10. willDestroy

At times, components require performing setup actions and cleaning them up when they're inactive. However, the willUnmount hook isn't suitable for the cleanup task because the component might be destroyed before it's even been mounted.

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

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message