Livewire v3: Computed Properties & Batched Updates | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://www.msaied.com) [ Home ](https://www.msaied.com) [ Projects ](https://www.msaied.com/projects) [ Articles ](https://www.msaied.com/articles) [ Certificates ](https://www.msaied.com/certificates) [ Contact ](https://www.msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://www.msaied.com) [ Projects ](https://www.msaied.com/projects) [ Articles ](https://www.msaied.com/articles) [ Certificates ](https://www.msaied.com/certificates) [ Contact ](https://www.msaied.com#contact-section) [ home ](https://www.msaied.com) [ articles ](https://www.msaied.com/articles) Livewire v3 Performance: Reducing Round-Trips with Computed Properties and Batched Updates 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) ![Livewire v3 Performance: Reducing Round-Trips with Computed Properties and Batched Updates](https://cdn.msaied.com/246/c72e0c8c16fcc75d772cc898643c83d2.png) #livewire #laravel #performance #frontend Livewire v3 Performance: Reducing Round-Trips with Computed Properties and Batched Updates ============================================================================================ 20 Jun 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 1. [ 01 The Hidden Cost of Naive Livewire Components ](#the-hidden-cost-of-naive-livewire-components) 2. [ 02 Computed Properties: Memoised, Lazy, and Cache-Aware ](#computed-properties-memoised-lazy-and-cache-aware) 3. [ 03 Persisting Computed Values Across Requests ](#persisting-computed-values-across-requests) 4. [ 04 Debouncing and Lazy Bindings ](#debouncing-and-lazy-bindings) 5. [ 05 Batching Multiple Property Updates ](#batching-multiple-property-updates) 6. [ 06 Skipping Re-Renders with #\[Locked\] and #\[Renderless\] ](#skipping-re-renders-with-codelockedcode-and-coderenderlesscode) 7. [ 07 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. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.msaied.com%2Farticles%2Flivewire-v3-performance-reducing-round-trips-with-computed-properties-and-batched-updates&text=Livewire+v3+Performance%3A+Reducing+Round-Trips+with+Computed+Properties+and+Batched+Updates) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.msaied.com%2Farticles%2Flivewire-v3-performance-reducing-round-trips-with-computed-properties-and-batched-updates) Frequently Asked Questions ---------------------------- 3 questions Q01 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. Q02 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. Q03 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. Continue reading More Articles --------------- [ View all ](https://www.msaied.com/articles) [ ![Read/Write Splitting, Connection Pooling, and Sticky Reads in Laravel](https://cdn.msaied.com/295/d977bd189583149245c03d6d763d9db5.png) laravel database performance ### Read/Write Splitting, Connection Pooling, and Sticky Reads in Laravel Learn how Laravel's database layer handles read/write splitting, when sticky reads matter, and how to layer Pg... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 26 Jun 2026 4 min read Read ](https://www.msaied.com/articles/readwrite-splitting-connection-pooling-and-sticky-reads-in-laravel-2) [ ![Laravel Service Container: Contextual Binding, Tagging, and Method Injection](https://cdn.msaied.com/294/e5b9d047bd33c3f8b80069ef6a178884.png) laravel service-container dependency-injection ### Laravel Service Container: Contextual Binding, Tagging, and Method Injection Go beyond basic binding. Learn how contextual binding resolves different implementations per consumer, how tag... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 26 Jun 2026 3 min read Read ](https://www.msaied.com/articles/laravel-service-container-contextual-binding-tagging-and-method-injection-1) [ ![PostgreSQL JSONB in Laravel: Indexing, Querying, and Casting Without the Pain](https://cdn.msaied.com/293/f392a5ea52536901eac9677ffa2d070d.png) laravel postgresql eloquent ### PostgreSQL JSONB in Laravel: Indexing, Querying, and Casting Without the Pain JSONB columns unlock flexible schemas, but most Laravel apps leave performance on the table. Learn how to inde... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 25 Jun 2026 4 min read Read ](https://www.msaied.com/articles/postgresql-jsonb-in-laravel-indexing-querying-and-casting-without-the-pain) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://www.msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://www.msaied.com) - [Projects](https://www.msaied.com/projects) - [Articles](https://www.msaied.com/articles) - [Certificates](https://www.msaied.com/certificates) - [Contact](https://www.msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)