Real-time Form di Laravel Livewire 3 dengan wire:model.live

Kalau kamu pernah main-main dengan Laravel Livewire, pasti udah familiar sama wire:model. Nah, di versi 3, ada sedikit “kejutan” dari tim Livewire yang bikin perilaku wire:model berubah. Jangan panik dulu, ini bukan bug, tapi justru peningkatan performa yang lumayan signifikan.

Dari “Terlalu Rajin” ke “Santai Dulu Aja”

Di Livewire v2, wire:model itu live secara default. Artinya, tiap kali kita pencet keyboard, Livewire langsung kirim request ke server. Enaknya? Data langsung sinkron. Nggak enaknya? Server bisa jadi kayak spam inbox—penuh request tiap detik.

Makanya, di v3, mereka bikin wire:model jadi deferred by default. Jadi data di sisi client tetap update realtime, tapi server baru dikasih tahu kalau ada aksi beneran, misalnya klik tombol submit.

Kalau kamu kangen sama gaya lama (langsung sync tiap ketikan), tinggal pakai:

<input type="text" wire:model.live="search">

Yupss, tambahin .live, dan dia langsung “rajin” lagi.

Bedanya wire:model vs wire:model.live

• wire:model → nunggu aksi kayak submit.
• wire:model.live → sync tiap ketikan (kayak Livewire v2).

Ini penting banget buat fitur kayak search box, di mana user pengennya hasil muncul seiring mereka ngetik.

Jangan Takut, Ada Debounce

Kalau kamu mikir, “Lah, berarti server bisa kebanjiran request lagi dong?”
Tenang. Livewire udah kasih 150ms debounce otomatis. Jadi dia nunggu user berhenti ngetik sebentar sebelum kirim request. Dan kalau mau diatur lebih lama, gampang:

<input type="text" wire:model.live.debounce.300ms="userInput">

Mau pakai gaya beda? Ada juga .throttle. Bedanya:

• .debounce → nunggu sampai user berhenti ngetik.
• .throttle → kirim request tiap interval tertentu walau user masih ngetik.

Biasanya sih .debounce udah cukup aman.

Contoh Praktis: Pencarian Blogs

Bayangin kita bikin fitur search buat koleksi Blog. Kita nggak mau query ke database cuma gara-gara orang ngetik “a”. Minimal tunggu 2 karakter baru deh eksekusi.

<div>
    <input type="text"
           wire:model.live.debounce.250ms="query"
           placeholder="Search Posts...">
 
    @if($query && strlen($query) >= 2)
        <div class="posts">
            @foreach($posts as $post)
                <div class="post-item">
                    <strong>{{ $post->title }}</strong> by {{ $post->author }}
                    <span class="year">({{ $post->year }})</span>
                </div>
            @endforeach
 
            @if($posts->isEmpty())
                <p>No posts found for "{{ $query }}"</p>
            @endif
        </div>
    @endif
</div>

Dan di komponen Livewire-nya:

class PostSearch extends Component
{
    public $query = '';
    public $posts = [];
 
    public function updatedQuery()
    {
        if (strlen($this->query) >= 2) {
            $this->posts = Post::where('title', 'like', '%' . $this->query . '%')
                ->orWhere('author', 'like', '%' . $this->query . '%')
                ->take(15)
                ->get();
        } else {
            $this->posts = collect();
        }
    }
 
    public function render()
    {
        return view('livewire.post-search');
    }
}

Karena kita pakai wire:model.live, method updatedQuery() langsung jalan tiap kali query berubah. Kalau cuma wire:model biasa, dia baru nge-trigger setelah ada aksi submit.

Bonus: Modifiers Lain

Selain .live, kamu juga bisa main-main dengan:

• wire:model.blur → update setelah field kehilangan fokus.
• wire:model.change → update pas value berubah (cocok buat dropdown).

Menurutku, perubahan ini lumayan bikin hidup lebih nyaman. Di v2, kadang server berasa kayak dikerjain user yang lagi iseng ngetik “asdfghjkl” nonstop. Di v3, default-nya lebih hemat, tapi kita tetap bisa “balikin” gaya lama kalau perlu.

Kalau kamu sering bikin search bar atau input yang butuh realtime update, wire:model.live ini wajib banget dicoba. 🎯