# wire:key

The `wire:key` directive helps Livewire's DOM diffing engine accurately track elements across re-renders. By providing unique identifiers for dynamic content, especially in loops, `wire:key` ensures that updates, removals, and reordering work correctly and efficiently.

## Basic Usage

This simple list demonstrates `wire:key` for proper DOM tracking in loops:

{% tabs %}
{% tab title="BoxLang" %}

```javascript
// wires/ItemList.bx
class extends="cbwire.models.Component" {
    data = {
        "items": [
            {"id": 1, "name": "Apple"},
            {"id": 2, "name": "Banana"},
            {"id": 3, "name": "Cherry"}
        ]
    };

    function removeItem(itemId) {
        data.items = data.items.filter(function(item) {
            return item.id != arguments.itemId;
        });
    }
}
```

{% endtab %}

{% tab title="CFML" %}

```javascript
// wires/ItemList.cfc
component extends="cbwire.models.Component" {
    data = {
        "items" = [
            {"id" = 1, "name" = "Apple"},
            {"id" = 2, "name" = "Banana"},
            {"id" = 3, "name" = "Cherry"}
        ]
    };

    function removeItem(itemId) {
        data.items = data.items.filter(function(item) {
            return item.id != arguments.itemId;
        });
    }
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="BoxLang" %}

```html
<!-- wires/itemList.bxm -->
<bx:output>
<div>
    <bx:loop array="#items#" index="item">
        <div wire:key="item-#item.id#">
            #item.name#
            <button wire:click="removeItem(#item.id#)">Remove</button>
        </div>
    </bx:loop>
</div>
</bx:output>
```

{% endtab %}

{% tab title="CFML" %}

```html
<!-- wires/itemList.cfm -->
<cfoutput>
<div>
    <cfloop array="#items#" index="item">
        <div wire:key="item-#item.id#">
            #item.name#
            <button wire:click="removeItem(#item.id#)">Remove</button>
        </div>
    </cfloop>
</div>
</cfoutput>
```

{% endtab %}
{% endtabs %}

## What wire:key Does

When you add `wire:key` to an element, CBWIRE automatically:

* **Tracks Element Identity**: Provides unique identifiers for DOM diffing across re-renders
* **Prevents Rendering Issues**: Ensures proper updates when elements are added, removed, or reordered
* **Optimizes Performance**: Helps Livewire efficiently update only changed elements
* **Maintains State**: Preserves element state and event listeners during DOM updates

## Available Modifiers

The `wire:key` directive does not support any modifiers.

{% hint style="warning" %}
Ensure your key names are unique throughout the entire page, not just within your component template. Duplicate keys can cause rendering issues.
{% endhint %}

{% hint style="info" %}
Use `wire:key` in loops and dynamic content where elements can be added, removed, or reordered. Also use it in conditional blocks when Livewire has trouble detecting DOM changes within if/else statements.
{% endhint %}


---

# 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/template-directives/wire-key.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.