Livewire wire:key

Understanding wire:key

Why

It helps Livewire track DOM elements correctly during updates, preventing state mixups and improving performance.

When

Essential for places where the same livewire component is included multiple times, like @foreach statements.

Where

Add to the root element inside loops, or any element that needs unique identification across renders.

How

Use wire:key="unique-identifier" with stable values like entity IDs. Ex: wire:key="todo-{{$todo['id']}}"

@foreach Examples

Click on each example to see live demo:

WITHOUT wire:key

BROKEN

DOM state gets mixed up when reordering items. Input values stick to wrong positions.

WITH wire:key

CORRECT

Stable keys using todo ID preserve DOM state correctly. Input values move with their items.

RANDOM wire:key

WORST

Using rand() causes complete DOM regeneration. Every action scrambles input values.

NESTED COMPONENTS PARTIAL KEY

wire:key only on Livewire component, divs without keys cause DOM state mixing.

NESTED COMPONENTS

wire:key on Livewire component and the root div.

Parent-Child Components with Random wire:key

Click on each example to see live demo:

Child with RANDOM wire:key

BROKEN COMMUNICATION

Child sends events to parent, but random keys cause component re-initialization and console errors on button clicks.

Child without wire:key

WORKING CORRECTLY

Livewire keeps track of the component. Child-to-parent communication works flawlessly with no console errors.

Statistics from the aico repo

1,405
Total wire:key attributes
Outside of @foreach loops
920
Using randomly generated keys
64.6% of all wire:key usage

Do your part, stop using random keys!

Random keys break component state and cause unnecessary re-renders. Use stable, meaningful identifiers instead.

Migration Impact: The Livewire 3 migration is made harder by these random keys, as each one needs to be analyzed and replaced manually.

Note: The collected statistics might not be 100% accurate because aico includes legacy/unused pages that are still tracked in the repository.