Livewire v3: Computed Properties & Batched Updates | Mohamed Said       [Skip to content](#main)  [ ![](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed SaidLaravel Backend Engineer ](https://msaied.com/public) - [Home](https://msaied.com/public)
- [Projects](https://msaied.com/public/projects)
- [Articles](https://msaied.com/public/articles)
- [Certificates](https://msaied.com/public/certificates)
- [About](https://msaied.com/public#about)

           [  Contact](https://msaied.com/public#contact) Menu 

Menu
----

Close 

 - [HomeStart here](https://msaied.com/public)
- [ProjectsCase studies](https://msaied.com/public/projects)
- [ArticlesEngineering notes](https://msaied.com/public/articles)
- [CertificatesCredentials](https://msaied.com/public/certificates)
- [AboutHow I work](https://msaied.com/public#about)
- [ContactGet in touch](https://msaied.com/public#contact)

  [Start a conversation](https://msaied.com/public#contact) [WhatsApp](https://wa.me/201094619204) [Email](mailto:hello@msaied.com) 

 1. [Home](https://msaied.com/public)
2. /
3. [Articles](https://msaied.com/public/articles)
4. /
5. Livewire v3 Performance: Reducing Round-Trips with Computed Properties and Batched Updates

 Livewire v3 Performance: Reducing Round-Trips with Computed Properties and Batched Updates
===========================================================================================

 Livewire v3 gives you fine-grained control over when and how the server is hit. Learn to use computed properties, wire:model.live debouncing, and batched updates to cut unnecessary round-trips in data-heavy components.

 ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://msaied.com/public#person) Published 20 Jun 2026 · Updated 20 Jun 2026 · 3 min read

ShareCopy linkCopied

 ![Livewire v3 Performance: Reducing Round-Trips with Computed Properties and Batched Updates](https://cdn.msaied.com/246/c72e0c8c16fcc75d772cc898643c83d2.png) 

  On this page +1. [The Hidden Cost of Naive Livewire Components](#the-hidden-cost-of-naive-livewire-components)
2. [Computed Properties: Memoised, Lazy, and Cache-Aware](#computed-properties-memoised-lazy-and-cache-aware)
3. [Persisting Computed Values Across Requests](#persisting-computed-values-across-requests)
4. [Debouncing and Lazy Bindings](#debouncing-and-lazy-bindings)
5. [Batching Multiple Property Updates](#batching-multiple-property-updates)
6. [Skipping Re-Renders with #\[Locked\] and #\[Renderless\]](#skipping-re-renders-with-codelockedcode-and-coderenderlesscode)
7. [Key Takeaways](#key-takeaways)

 The Hidden Cost of Naive Livewire Components
--------------------------------------------

Every `wire:model` binding without a modifier fires a full server round-trip on each keystroke. In a component with a search field, three filter dropdowns, and a paginated table, that's a network request per character typed. On a busy server this compounds quickly.

Livewire v3 ships with the tools to fix this — but they require deliberate use.

---

Computed Properties: Memoised, Lazy, and Cache-Aware
----------------------------------------------------

The `#[Computed]` attribute turns a method into a property that is evaluated once per render cycle and memoised for the lifetime of that request.

```php
use Livewire\Attributes\Computed;

class ProductSearch extends Component
{
    public string $query = '';
    public string $category = '';

    #[Computed]
    public function products(): LengthAwarePaginator
    {
        return Product::query()
            ->when($this->query, fn ($q) => $q->search($this->query))
            ->when($this->category, fn ($q) => $q->where('category_id', $this->category))
            ->paginate(20);
    }

    public function render(): View
    {
        return view('livewire.product-search');
    }
}

```

In the Blade template you access it as `$this->products` — Livewire calls the method once and caches the result for that render. No accidental double-query from calling `$this->products` in both a conditional and a loop.

### Persisting Computed Values Across Requests

For expensive aggregates that don't change per keystroke, add a cache TTL:

```php
#[Computed(cache: true, seconds: 60)]
public function categoryCounts(): Collection
{
    return Product::query()
        ->selectRaw('category_id, count(*) as total')
        ->groupBy('category_id')
        ->pluck('total', 'category_id');
}

```

The result is stored in the Laravel cache keyed by component ID and method name. Invalidate it explicitly with `unset($this->categoryCounts)` when a mutation occurs.

---

Debouncing and Lazy Bindings
----------------------------

Never bind a search input with plain `wire:model`. Use `wire:model.live.debounce.400ms` to wait for the user to pause:

```xml

```

For fields where you only care about the final value (a select, a checkbox), `wire:model.blur` fires exactly one request when focus leaves the element:

```xml

    @foreach($categories as $id => $name)
        {{ $name }}
    @endforeach

```

Combining `.live.debounce` on text inputs with `.blur` on selects already eliminates the majority of superfluous requests in a typical filter UI.

---

Batching Multiple Property Updates
----------------------------------

When Alpine.js or a custom JS event needs to update several Livewire properties at once, avoid firing one request per property. Use `$wire.set` inside `$wire.call` — or better, batch them with the JS API:

```javascript
// In an Alpine component or inline script
AsyncFunction: async () => {
    await $wire.setMultiple({
        query: '',
        category: '',
        page: 1,
    });
}

```

On the PHP side, expose a single action that accepts all reset values:

```php
public function resetFilters(): void
{
    $this->query    = '';
    $this->category = '';
    $this->resetPage();
}

```

One method call, one HTTP request, one re-render. This is always preferable to three sequential `$wire.set()` calls.

---

Skipping Re-Renders with `#[Locked]` and `#[Renderless]`
--------------------------------------------------------

Not every action needs a full re-render. Mark actions that only mutate server state (e.g., toggling a favourite) with `#[Renderless]`:

```php
use Livewire\Attributes\Renderless;

#[Renderless]
public function toggleFavourite(int $productId): void
{
    auth()->user()->favourites()->toggle($productId);
}

```

The round-trip still happens, but Livewire skips diffing and patching the DOM entirely — a meaningful saving when the component renders a large table.

---

Key Takeaways
-------------

- Use `#[Computed]` to memoize expensive queries per render; add `cache: true` for cross-request persistence.
- Replace `wire:model` with `wire:model.live.debounce.400ms` on text inputs and `wire:model.blur` on selects.
- Consolidate multi-property resets into a single PHP action to avoid stacked round-trips.
- Mark fire-and-forget mutations with `#[Renderless]` to skip DOM diffing.
- Profile with browser DevTools Network tab first — count requests before optimising.

- [livewire](https://msaied.com/public/articles?search=livewire)
- [laravel](https://msaied.com/public/articles?search=laravel)
- [performance](https://msaied.com/public/articles?search=performance)
- [frontend](https://msaied.com/public/articles?search=frontend)

 Frequently asked questions 
---------------------------

  Does `#\[Computed(cache: true)\]` share the cached value across different users?No. Livewire keys the cache entry by component ID, which is unique per user session. Different users get separate cache entries, so there is no data leakage between sessions.

   When should I use `wire:model.blur` versus `wire:model.live.debounce`?Use `.blur` for inputs where intermediate values are meaningless (selects, checkboxes, date pickers). Use `.live.debounce` for text inputs where you want near-real-time feedback but still want to wait for the user to pause typing.

   Can `#\[Renderless\]` actions still return data to the frontend?Yes. You can dispatch browser events or use `$this->dispatch()` inside a renderless action. Alpine listeners on the page can react to those events without a DOM diff ever occurring.

   ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp)About the author
----------------

[Mohamed Said](https://msaied.com/public#person)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow.

[About](https://msaied.com/public#about) [GitHub ↗](https://github.com/EG-Mohamed) [LinkedIn ↗](https://www.linkedin.com/in/msaiedm/) [WhatsApp ↗](https://wa.me/201094619204) [Email Address ↗](mailto:hello@msaied.com) [My CV ↗](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)  

   [Previous articleFilament v3 Custom Field Plugins, Custom Columns, and Render Hooks](https://msaied.com/public/articles/filament-v3-custom-field-plugins-custom-columns-and-render-hooks) [Next articleAdvanced Authorization in Laravel: Gates, Policies, and Response-Based Access Control](https://msaied.com/public/articles/advanced-authorization-in-laravel-gates-policies-and-response-based-access-control)  

   On this page
-------------

1. [The Hidden Cost of Naive Livewire Components](#the-hidden-cost-of-naive-livewire-components)
2. [Computed Properties: Memoised, Lazy, and Cache-Aware](#computed-properties-memoised-lazy-and-cache-aware)
3. [Persisting Computed Values Across Requests](#persisting-computed-values-across-requests)
4. [Debouncing and Lazy Bindings](#debouncing-and-lazy-bindings)
5. [Batching Multiple Property Updates](#batching-multiple-property-updates)
6. [Skipping Re-Renders with #\[Locked\] and #\[Renderless\]](#skipping-re-renders-with-codelockedcode-and-coderenderlesscode)
7. [Key Takeaways](#key-takeaways)

 ###  Have a technical challenge?

 Tell me what you’re building. I reply within two working days.

[Start a conversation](https://msaied.com/public#contact) 

   Related articles
-----------------

 [ ![](https://cdn.msaied.com/745/8744e1be5136b430da52e9fca3ed3964.png)  · 3 min read### Service Container Deep Dive: Contextual Binding, Tagging, and Method Injection

6 Oct 2026 ](https://msaied.com/public/articles/service-container-deep-dive-contextual-binding-tagging-and-method-injection-1) [ ![](https://cdn.msaied.com/743/8998fac3a41451ab3fe1588194e17a43.png) Filament · 3 min read### Securing Filament Plugins with Plumb: Automated Security Scoring for PHP Packages

5 Oct 2026 ](https://msaied.com/public/articles/securing-filament-plugins-with-plumb-automated-security-scoring-for-php-packages) [ ![](https://cdn.msaied.com/742/2d02018669cdeedccb5de2efb898f0ee.png) Filament · 3 min read### Filament v3.3.56 Released: File Hash Names and Livewire Upload Fix

5 Oct 2026 ](https://msaied.com/public/articles/filament-v3356-released-file-hash-names-and-livewire-upload-fix) 

  Have a technical challenge?
----------------------------

Tell me what you’re building. I reply within two working days.

 [Discuss your project ↗](https://msaied.com/public#contact) 

  © 2026 Mohamed Said · Built with Laravel, meant to last.Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow.

 - [Home](https://msaied.com/public)
- [Articles](https://msaied.com/public/articles)
- [Certificates](https://msaied.com/public/certificates)
- [GitHub](https://github.com/EG-Mohamed)
- [LinkedIn](https://www.linkedin.com/in/msaiedm/)
- [WhatsApp](https://wa.me/201094619204)
- [Email Address](mailto:hello@msaied.com)
- [My CV](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)
- [Sitemap](https://msaied.com/public/sitemap.xml)