> For the complete documentation index, see [llms.txt](https://cbwire.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbwire.ortusbooks.com/template-directives/wire-key.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://cbwire.ortusbooks.com/template-directives/wire-key.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.