# Wire Lifecycle

## Order of Operations

When a [Wire](/v2-1/essentials/creating-components.md) is initially loaded (before any background AJAX requests are performed), the Lifecycle Methods are executed in the following order.

1. onMount()
2. Render [Computed Properties](/v2-1/essentials/computed-properties.md)
3. onRender() or implicit [Template](/v2-1/essentials/templates.md) rendering

For background AJAX requests, lifecycle methods are executed in this order.

1. onHydrate\[DataProperty]\()
2. onHydrate()
3. Render [Computed Properties](/v2-1/essentials/computed-properties.md)
4. Execute [Actions](/v2-1/essentials/actions.md)
5. onRender() or implicit [Template](/v2-1/essentials/templates.md) rendering

## onMount

Runs only **once** when the Wire is initially wired.&#x20;

{% hint style="warning" %}
This does not fire during subsequent renderings for the Wire.
{% endhint %}

```javascript
component extends="cbwire.models.Component" {

    data = {
        "taskId": 0
    };

    function onMount( event, rc, prc, parameters ){
        data.taskId = event.getValue( "taskId" );
    }

}

```

{% hint style="warning" %}
onMount() replaces what was formerly mount(). The mount() method is deprecated and will be removed in future major releases of CBWIRE.
{% endhint %}

## onHydrate

Runs on subsequent requests, after the Wire is hydrated, but before [Computed Properties](/v2-1/essentials/computed-properties.md) are rendered, before an [Action](/v2-1/essentials/actions.md) is performed, or before onRender() is called.

```javascript
component extends="cbwire.models.Component" {

    data = {
        "hydrated": false
    };

    function clicked() {}

    function onHydrate( data ) {
        // Note that computed properties are not rendered yet
        data.hydrated = true;
    }

    function onRender( args ) {
        return "
            <div>
                <div>Hydrated: #args.hydrated#</div>
                <button wire:click='clicked'>Click me</button>
            </div>
        ";
    }
}
```

## onHydrate\[ DataProperty ]

Runs on subsequent requests, after a specific [Data Property](/v2-1/essentials/properties.md) is hydrated, but before [Computed Properties](/v2-1/essentials/computed-properties.md) are rendered, before an [Action](/v2-1/essentials/actions.md) is performed, or before onRender() is called.

```javascript
component extends="cbwire.models.Component" {

    data = {
        "count": 1
    };

    function onHydrateCount( data ) {
        // Note that computed properties are not rendered yet
        data.count += 1;
    }  
}
```

## onRender

Runs during the rendering of a [Wire](/v2-1/essentials/creating-components.md). If onRender() is defined on the Wire, CBWIRE will use what is returned as the component's template, otherwise it will perform a lookup for a view template. The `args` parameter is provided which contains both the [Data Properties](/v2-1/essentials/properties.md) and any rendered [Computed Properties](/v2-1/essentials/computed-properties.md).

```javascript
component extends="cbwire.models.Component" {

    data = {
        "rendered": true
    };
    
    computed = {
        "currentDate": function() {
            return now();
        }
    }

    function onRender( args ) {
        return "
            <div>
                <div>Rendered: #args.rendered# at #args.currentDate#</div>
            </div>
        ";
    }
}
```


---

# 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://cbwire.ortusbooks.com/v2-1/essentials/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.
