# Lifecycle Events

[Web Component lifecycle events](https://javascript.works-hub.com/learn/web-components-api-lifecycle-events-and-custom-events-66668) are callbacks or "hooks" for intercepting web component code as components are constructed, added to the DOM, and changed.  

## connectedCallback

The most notable web component lifecycle event is `connectedCallback`.  This method is called after a web component is attached to the DOM.  This is most often the place where initialization of component data takes place.

```javascript
class PageComponent extends wire.ui.WebComponent {

    async connectedCallback()       

        const productDataSet = ...;
              
        this.products = await productDataSet(this.productId).execAsync();        
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}
customElements.define('my-page', PageComponent);
```

## wrAppReady

Because web components are added to the DOM independently, `connectedCallback` cannot handle dependencies between components where a ready state for one is required before another can be initialized.  

The most common example of this is an application developed using nested components where it may be required that an application level initialization be completed before any components should render.  To accomplish this using web components, use WireBootstrap's `wrAppReady` events.  

The example below uses a top level component called `my-app`.  It calls `wrSetAppReady` when it has finished its initializing which fires `wrAppReady` in any child component.

```javascript
class AppComponent extends wire.ui.WebComponent {

    connectedCallback() 
          
        super.connectedCallback();
        
        // application initialization
        // global state
        // user profiles
        // menus
        // security
        // pull server configuration
        // etc
        
        super.wrSetAppReady();   
            
    }
    
    static get template() {
      return '<my-page></my-page>';
    }
}
customElements.define('my-app', AppComponent);
```

Child component data initialization is moved from `connectedCallback` to `wrAppReady`.

```javascript
class PageComponent extends wire.ui.WebComponent {

    async wrAppReady()       

        const productDataSet = ...;
              
        this.products = await productDataSet(this.productId).execAsync();        
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}
```

## attributeChangedCallback

After web components are connected to the DOM, the `attributeChangedCallback` event will be fired when an attribute changes outside of the component.

In the example below, the `productId` attribute on the component is changed .  The `attributeChangedCallback` method is used to call the data service for updated data and rebind the `products` list.

```javascript
class PageComponent extends wire.ui.WebComponent {

    async attributeChangedCallback(name, oldValue, newValue)       

        if(name == "productId") {
        
            const productDataSet = ...;
            
            this.products = await productDataSet(this.productId).execAsync();        
         }
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}
```

## wrObjectChanged

Web component attributes do not natively handle working with objects.  WireBootstrap for Web Components adds this capability.  The `wrObjectChanged` event is the object equivalent of `attributeChangedCallback` .

In the example below, the products list is passed into the web component as an object attribute.  Any changes to this list can be picked up in the `wrObjectChanged` event.

```javascript
class PageComponent extends wire.ui.WebComponent {

    async wrObjectChanged(obj, name)   
        
        if(name == "products"){            
            // products list changed
        }
    }

   static get properties() {
    return {
      products: true,
      productId: true
  }
  
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/webcomponents/lifecycle-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.