← Back to Home
WITHOUT wire:key WITH wire:key RANDOM wire:key NESTED COMPONENTS

PARTIAL wire:key (MIXED BEHAVIOR - Component Only)

Learn about partial wire:key usage
ID: 1 | Position: 1 | Status: Pending
Extra content in div
Understand div state vs component state
ID: 2 | Position: 2 | Status: Completed
Extra content in div
See mixed behavior in action
ID: 3 | Position: 3 | Status: Pending
Extra content in div
Notice the difference in behavior
ID: 4 | Position: 4 | Status: Pending
Extra content in div

Test Instructions

  1. 1 As long as the action only affects the component, Livewire will work normally
  2. 2 Check off one of the tasks
  3. 3 Open your browser's Developer Console (F12)
  4. 4 Use ↑/↓ buttons to reorder items
  5. 5 See console error! - "Snapshot missing on Livewire component with id: [ID]"
Critical Issue:

Without wire:key on the root div, Livewire components lose their connection to the backend. Button clicks fail with console errors, and the DOM state gets scrambled!

Partial wire:key Code Structure:

Template with Mixed wire:key Usage:
@foreach($todos as $index => $todo)
    <div class="bg-gradient-to-r from-yellow-50 to-orange-50 p-2 rounded-lg">
        <div class="bg-white rounded border p-1">
            <livewire:todo-item
                :todo="$todo"
                :index="$index"
                :totalCount="count($todos)"
                wire:key="todo-item-{{ $todo['id'] }}"
            />
        </div>

        <div class="mt-2 px-2 py-1 bg-yellow-50">
            <span>ID: {{ $todo['id'] }}</span> |
            <input
                type="text"
                placeholder="This input will lose state!"
                class="ml-2 border border-yellow-400"
            />
        </div>

        <div class="mt-1 px-2 py-1 bg-orange-50">
            <input type="checkbox" class="ml-2" />
            <label>Check me - this state will be lost!</label>
        </div>
    </div>
@endforeach

INSUFFICIENT: Livewire component has wire:key but root div doesn't

Key Takeaway:

Having wire:key only on the Livewire component is NOT enough! Without wire:key on the root div of the @foreach loop, Livewire completely breaks. The root div wire:key is absolutely essential.