Using Livewire’s wire:poll Directive for Periodic UI Updates

Livewire wire:poll for automatic refresh

The wire:poll directive tells Livewire to re‑render a part of the component on a fixed interval without any user interaction. This is useful for live counters, status checks, or any UI that needs to reflect server‑side changes on a timer.

Worked example

First, create a simple Livewire component that exposes a counter and a method to increment it.

// app/Http/Livewire/Counter.php
namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Next, add the Blade markup. The wire:poll attribute is placed on the element that should be refreshed every 5 seconds (5000 ms).

    
Count: {{ $count }}
    +1

When the page loads, Livewire will send an AJAX request to the server every five seconds, invoke the component’s render method, and replace the contents of the with the latest $count value. Clicking the button works as usual because it triggers a separate wire:click request.

How it works

Livewire treats wire:poll as a timer that, on each tick, issues a standard Livewire request (the same endpoint used for wire:model updates or wire:click). The request runs the component’s lifecycle up to render, returns the fresh HTML for the scoped element, and morphs the DOM. No full‑page reload occurs.

Limits and considerations

• Frequency cost: Every poll generates a request. Intervals below 500 ms can noticeably increase server load and bandwidth, especially on shared hosting or serverless platforms.
• Scope: The directive only affects the element it decorates and its children. It cannot directly trigger a method on another Livewire component.
• Static interval: The millisecond value is fixed when the page is rendered. To change it dynamically you must replace the attribute via JavaScript or re‑render the whole component.
• Render dependency: wire:poll only causes a render call. If you need to update data, place that logic inside render (or mount) or rely on properties that are already updated elsewhere.

Common mistakes

• Placing wire:poll on a non‑Livewire element (e.g., a plain <div> outside a Livewire component). Livewire ignores the attribute, so no polling occurs.
• Expecting the poll to invoke a specific method like increment. It only triggers a render; you must put the desired logic in render or rely on reactive properties.
• Omitting a return statement in render. If the method returns null or does not return a view, the poll results in an empty update, making the targeted element disappear.
• Using wire:poll on form inputs without protection. Each poll re‑renders the input, overwriting any unsaved user edits unless you use wire:model.lazy or defer rendering with a conditional.