Livewire v3 Performance: Computed Props & Round-Trips | 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: Computed Properties, Wire:model Debounce, and Reducing Round-Trips On this page 1. [ The Real Cost of a Livewire Round-Trip ](#the-real-cost-of-a-livewire-round-trip) 2. [ Computed Properties and the #\[Computed\] Attribute ](#computed-properties-and-the-codecomputedcode-attribute) 3. [ Request-Scoped Caching ](#request-scoped-caching) 4. [ wire:model Modifier Discipline ](#wiremodel-modifier-discipline) 5. [ Debounce ](#debounce) 6. [ Blur-Only Updates ](#blur-only-updates) 7. [ Lazy ](#lazy) 8. [ Lazy Component Hydration ](#lazy-component-hydration) 9. [ Avoiding Serialisation Bloat ](#avoiding-serialisation-bloat) 10. [ Takeaways ](#takeaways) ![Livewire v3 Performance: Computed Properties, Wire:model Debounce, and Reducing Round-Trips](https://cdn.msaied.com/732/b44701d3e30645373145d67ff2d0e716.png) #livewire #laravel #performance #frontend Livewire v3 Performance: Computed Properties, Wire:model Debounce, and Reducing Round-Trips ============================================================================================= 3 Oct 2026 4 min read ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said Table of contents 10 sections 1. [ 01 The Real Cost of a Livewire Round-Trip ](#the-real-cost-of-a-livewire-round-trip) 2. [ 02 Computed Properties and the #\[Computed\] Attribute ](#computed-properties-and-the-codecomputedcode-attribute) 3. [ 03 Request-Scoped Caching ](#request-scoped-caching) 4. [ 04 wire:model Modifier Discipline ](#wiremodel-modifier-discipline) 5. [ 05 Debounce ](#debounce) 6. [ 06 Blur-Only Updates ](#blur-only-updates) 7. [ 07 Lazy ](#lazy) 8. [ 08 Lazy Component Hydration ](#lazy-component-hydration) 9. [ 09 Avoiding Serialisation Bloat ](#avoiding-serialisation-bloat) 10. [ 10 Takeaways ](#takeaways) The Real Cost of a Livewire Round-Trip -------------------------------------- Every Livewire network request serialises your component's public state, ships it to the server, re-hydrates the component, runs your logic, re-renders the Blade view, and diffs the DOM. That pipeline is fast — but it is not free. The most common performance mistake is triggering it far more often than necessary. This article focuses on three concrete levers: **computed properties with request-scoped caching**, **wire:model modifier discipline**, and **lazy component hydration**. --- Computed Properties and the `#[Computed]` Attribute --------------------------------------------------- Before Livewire v3, developers often fetched related data inside `render()` or stored it as a public property, causing either redundant queries per render or bloated serialised state. Livewire v3 introduces first-class computed properties via the `#[Computed]` attribute: ```php use Livewire\Attributes\Computed; use Livewire\Component; class OrderDashboard extends Component { public int $statusFilter = 0; #[Computed] public function orders(): \Illuminate\Contracts\Pagination\LengthAwarePaginator { return Order::query() ->when($this->statusFilter, fn ($q, $s) => $q->where('status', $s)) ->latest() ->paginate(25); } public function render() { return view('livewire.order-dashboard'); } } ``` In Blade you access it as `$this->orders` — no public property, so the paginator is **never serialised** into the snapshot payload. ### Request-Scoped Caching By default a computed property re-executes on every access within the same request. Add `persist: true` to cache across multiple renders in the same HTTP lifecycle: ```php #[Computed(persist: true)] public function expensiveMetrics(): array { return app(MetricsService::class)->forCurrentTenant(); } ``` Use `persist: true` only for data that does not change mid-request. For data that must reflect the latest state after an action, omit it and let the property recompute naturally. --- wire:model Modifier Discipline ------------------------------ `wire:model` without a modifier fires a network request on every `input` event — every keystroke in a text field. This is almost never what you want for search inputs or filters. ### Debounce ```xml ``` `.live` opts into real-time syncing (replacing the old default behaviour). `.debounce.400ms` collapses rapid keystrokes into a single request after 400 ms of inactivity. For most search UIs, 300–500 ms is imperceptible to users but eliminates 80–90 % of requests. ### Blur-Only Updates For fields where the user should complete their input before the server reacts — email, numeric inputs — use `.blur`: ```xml ``` No round-trip occurs until focus leaves the element. Combine with client-side Alpine validation for immediate feedback without a server call. ### Lazy `.lazy` is the classic equivalent of `change` event binding — fires on blur for text inputs and on selection for selects: ```xml @foreach ($categories as $category) {{ $category->name }} @endforeach ``` --- Lazy Component Hydration ------------------------ For dashboards with multiple independent Livewire components, hydrating everything on the initial page load blocks the first meaningful paint. Use the `lazy` attribute to defer hydration: ```blade ``` Each lazy component renders a placeholder on the server, then fires a subsequent request to hydrate itself independently. The page becomes interactive faster, and slow components do not block fast ones. Provide a skeleton placeholder via the `placeholder()` method: ```php public static function placeholder() { return view('components.skeleton-card'); } ``` --- Avoiding Serialisation Bloat ---------------------------- Public properties are serialised into every snapshot. Avoid storing large collections or Eloquent models as public properties: ```php // Bad — entire collection serialised on every request public Collection $products; // Good — fetched fresh, never serialised #[Computed] public function products(): Collection { return Product::active()->get(); } ``` If you need to track a selected item, store only its ID: ```php public ?int $selectedProductId = null; #[Computed] public function selectedProduct(): ?Product { return $this->selectedProductId ? Product::find($this->selectedProductId) : null; } ``` --- Takeaways --------- - Use `#[Computed]` for any data derived from the database — it stays out of the serialised snapshot. - Add `persist: true` only for data that is stable within a single request lifecycle. - Default to `wire:model.live.debounce.400ms` for search/filter inputs; use `.blur` for form fields. - Lazy-load independent dashboard components to unblock first paint. - Store only scalar IDs in public properties; reconstruct models via computed properties. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.msaied.com%2Farticles%2Flivewire-v3-performance-computed-properties-wiremodel-debounce-and-reducing-round-trips&text=Livewire+v3+Performance%3A+Computed+Properties%2C+Wire%3Amodel+Debounce%2C+and+Reducing+Round-Trips) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.msaied.com%2Farticles%2Flivewire-v3-performance-computed-properties-wiremodel-debounce-and-reducing-round-trips) Frequently Asked Questions ---------------------------- 3 questions Q01 Does `#\[Computed(persist: true)\]` cache across multiple HTTP requests? No. `persist: true` caches the computed value for the duration of a single HTTP request only — across multiple render calls within that request. It does not use Laravel's cache store. For cross-request caching, call `Cache::remember()` inside the computed method body. Q02 When should I choose `.debounce` over `.lazy` on a wire:model input? Use `.debounce` when you want real-time feedback as the user types but want to collapse rapid keystrokes — search boxes are the canonical example. Use `.lazy` (or `.blur`) when the server should only react once the user has finished entering a value, such as a form field that triggers validation. Q03 Can lazy Livewire components still receive props from the parent? Yes. Props passed to a lazy component are available when the deferred hydration request fires. The component receives them exactly as it would in a normal mount cycle; the laziness only delays when that mount cycle runs. Continue reading More Articles --------------- [ View all ](https://www.msaied.com/articles) [ ![Laravel September 2026 Product Updates: AI Keys, Semantic Search, and Cloud Improvements](https://cdn.msaied.com/731/759b68914c20a5403430fd886d488a80.png) Laravel Laravel Cloud Laravel Scout ### Laravel September 2026 Product Updates: AI Keys, Semantic Search, and Cloud Improvements Laravel's September 2026 updates bring per-tenant AI provider keys, semantic and hybrid search for Typesense a... ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said 2 Oct 2026 4 min read Read ](https://www.msaied.com/articles/laravel-september-2026-product-updates-ai-keys-semantic-search-and-cloud-improvements) [ ![Eloquent Custom Relations: Polymorphic Pivots, Has-One-Of-Many, and Raw Join Relations](https://cdn.msaied.com/728/b96439f5ef5f084b44d736951875f964.png) laravel eloquent database ### Eloquent Custom Relations: Polymorphic Pivots, Has-One-Of-Many, and Raw Join Relations Beyond belongsTo and hasMany lies a set of underused Eloquent relation types that eliminate ugly query hacks.... ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said 2 Oct 2026 3 min read Read ](https://www.msaied.com/articles/eloquent-custom-relations-polymorphic-pivots-has-one-of-many-and-raw-join-relations) [ ![Laravel Caching Strategies: Tags, Stampede Prevention, and Cache-Aside at Scale](https://cdn.msaied.com/727/7873d7495db459e7a6e3bfbb8835852d.png) laravel caching redis ### Laravel Caching Strategies: Tags, Stampede Prevention, and Cache-Aside at Scale Beyond simple remember() calls: how to use cache tags for granular invalidation, prevent thundering-herd stamp... ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said 2 Oct 2026 3 min read Read ](https://www.msaied.com/articles/laravel-caching-strategies-tags-stampede-prevention-and-cache-aside-at-scale-2) [ ![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)