Livewire v3 Performance: Payloads & Computed Properties | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ home ](https://msaied.com) [ articles ](https://msaied.com/articles) Livewire v3 Performance: Lazy Hydration, Computed Properties, and Minimising Wire Payloads On this page 1. [ Why Livewire Payloads Balloon ](#why-livewire-payloads-balloon) 2. [ Computed Properties: Derive, Don't Store ](#computed-properties-derive-dont-store) 3. [ Persisting Computed Values Across Requests ](#persisting-computed-values-across-requests) 4. [ Lazy Hydration for Below-the-Fold Components ](#lazy-hydration-for-below-the-fold-components) 5. [ Targeted Dirty-Tracking with #\[Locked\] and wire:model.live ](#targeted-dirty-tracking-with-codelockedcode-and-codewiremodellivecode) 6. [ Trimming the Payload: Avoid Public Eloquent Models ](#trimming-the-payload-avoid-public-eloquent-models) 7. [ Takeaways ](#takeaways) ![Livewire v3 Performance: Lazy Hydration, Computed Properties, and Minimising Wire Payloads](https://cdn.msaied.com/431/5931d6ca41b721bc1cd98ccc4ce063c7.png) #livewire #laravel #performance #frontend Livewire v3 Performance: Lazy Hydration, Computed Properties, and Minimising Wire Payloads ============================================================================================ 16 Jul 2026 4 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 1. [ 01 Why Livewire Payloads Balloon ](#why-livewire-payloads-balloon) 2. [ 02 Computed Properties: Derive, Don't Store ](#computed-properties-derive-dont-store) 3. [ 03 Persisting Computed Values Across Requests ](#persisting-computed-values-across-requests) 4. [ 04 Lazy Hydration for Below-the-Fold Components ](#lazy-hydration-for-below-the-fold-components) 5. [ 05 Targeted Dirty-Tracking with #\[Locked\] and wire:model.live ](#targeted-dirty-tracking-with-codelockedcode-and-codewiremodellivecode) 6. [ 06 Trimming the Payload: Avoid Public Eloquent Models ](#trimming-the-payload-avoid-public-eloquent-models) 7. [ 07 Takeaways ](#takeaways) Why Livewire Payloads Balloon ----------------------------- Every Livewire network round-trip serialises your component's public state into JSON, ships it to the server, re-hydrates the component, runs the action, then returns a diff. The more public properties you expose — and the larger their values — the heavier that payload becomes. On a component with a paginated Eloquent collection stored as a public property, you can easily hit tens of kilobytes per interaction. The fix is not to abandon Livewire; it is to be deliberate about *what* lives in public state versus what is derived on demand. Computed Properties: Derive, Don't Store ---------------------------------------- The single biggest payload win is replacing stored query results with `#[Computed]` properties. Livewire v3 memoises them for the lifetime of a single request, so multiple template references cost one query. ```php use Livewire\Attributes\Computed; class UserTable extends Component { public string $search = ''; public int $perPage = 25; #[Computed] public function users(): LengthAwarePaginator { return User::query() ->when($this->search, fn ($q) => $q->where('name', 'like', "%{$this->search}%")) ->paginate($this->perPage); } public function render(): View { return view('livewire.user-table'); } } ``` The `$users` paginator never touches the wire payload. Only `$search` (a short string) and `$perPage` (an integer) are serialised. The query runs fresh on each hydration — which is exactly what you want for paginated, filterable data. ### Persisting Computed Values Across Requests For expensive aggregates that do not change on every interaction, add `persist: true`: ```php #[Computed(persist: true)] public function roleSummary(): array { return Role::withCount('users')->pluck('users_count', 'name')->all(); } ``` Livewire caches the return value in the session between requests. Use this sparingly — stale data is a real risk — and pair it with an explicit `unset($this->roleSummary)` call inside any action that mutates roles. Lazy Hydration for Below-the-Fold Components -------------------------------------------- Nesting many Livewire components on a single page multiplies initial hydration cost. The `#[Lazy]` attribute defers a component's first render until the browser requests it: ```php use Livewire\Attributes\Lazy; #[Lazy] class RecentActivityFeed extends Component { public function placeholder(): View { return view('livewire.placeholders.activity-skeleton'); } public function render(): View { return view('livewire.recent-activity-feed'); } } ``` The parent page renders instantly; the browser fires a subsequent request for each lazy component. This trades one heavy synchronous render for several lighter async ones, which is almost always the right trade-off for dashboards. Targeted Dirty-Tracking with `#[Locked]` and `wire:model.live` -------------------------------------------------------------- Avoid `wire:model.live` on every input. It fires a network request on every keystroke. Reserve it for fields where immediate server feedback is genuinely needed (e.g., async validation). Use `wire:model` (deferred, syncs on next action) everywhere else. For properties that should never be mutated from the client — IDs, tenant context, permission flags — add `#[Locked]`: ```php #[Locked] public int $tenantId; ``` Livewire will throw a `CorruptComponentPayloadException` if the client attempts to overwrite it, preventing a class of mass-assignment-style vulnerabilities. Trimming the Payload: Avoid Public Eloquent Models -------------------------------------------------- Storing an entire Eloquent model as a public property serialises every attribute, including ones your template never reads. Prefer storing only the identifier and re-fetching via a computed property: ```php // Bad — full model in wire payload public User $user; // Good — only the ID travels over the wire public int $userId; #[Computed] public function user(): User { return User::findOrFail($this->userId); } ``` For deeply nested forms, consider a DTO backed by Livewire's `#[Validate]` attribute rather than a raw array, so only the fields you declare are serialised. Takeaways --------- - Replace public query results with `#[Computed]` properties — they are memoised per request and never serialised. - Use `persist: true` on expensive, rarely-changing aggregates; invalidate explicitly. - Apply `#[Lazy]` to below-the-fold components to defer hydration cost. - Prefer `wire:model` (deferred) over `wire:model.live` unless real-time server feedback is required. - Mark immutable server-side properties with `#[Locked]` to prevent client tampering. - Store only scalar identifiers in public state; re-hydrate full models via computed properties. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Flivewire-v3-performance-lazy-hydration-computed-properties-and-minimising-wire-payloads&text=Livewire+v3+Performance%3A+Lazy+Hydration%2C+Computed+Properties%2C+and+Minimising+Wire+Payloads) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Flivewire-v3-performance-lazy-hydration-computed-properties-and-minimising-wire-payloads) Frequently Asked Questions ---------------------------- 2 questions Q01 Does using #\[Computed\] mean the query runs on every single request, even when the data hasn't changed? Yes, by default a computed property re-executes its method on every hydration cycle. That is intentional — it keeps the wire payload small and the data fresh. If the query is expensive and the data is stable, add persist: true to cache the result in the session across requests, and call unset($this->propertyName) in any action that invalidates it. Q02 When should I use a nested Livewire component versus a Blade include for performance? Use a nested Livewire component only when that section needs its own independent interactivity or state. A Blade include has zero wire overhead. Unnecessary nesting multiplies hydration cost; pair any nested component with #[Lazy] if it is not needed on initial paint. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![Filament v5 Preview: Schema Unification, Performance Shifts, and How to Prepare](https://cdn.msaied.com/430/44b6a4ac9fef052463a7ca8318fe463e.png) filament laravel filament-v5 ### Filament v5 Preview: Schema Unification, Performance Shifts, and How to Prepare Filament v5 is reshaping how panels, forms, and tables are composed. This deep-dive covers the confirmed archi... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 16 Jul 2026 4 min read Read ](https://msaied.com/articles/filament-v5-preview-schema-unification-performance-shifts-and-how-to-prepare-1) [ ![Build a Laravel Scout Search Endpoint With the HTTP QUERY Method](https://cdn.msaied.com/433/f1100f27bf9bb41032e0ea927629e818.png) Laravel Laravel Scout HTTP QUERY ### Build a Laravel Scout Search Endpoint With the HTTP QUERY Method Learn how to register an HTTP QUERY route in Laravel 13 using Route::match(), back it with Laravel Scout's dat... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 16 Jul 2026 3 min read Read ](https://msaied.com/articles/build-a-laravel-scout-search-endpoint-with-the-http-query-method) [ ![Enforce Per-Action Waiting Periods in Laravel with the Cooldown Package](https://cdn.msaied.com/432/a8a830b45119cc7fafc7e27d7951e114.png) Laravel Packages Rate Limiting ### Enforce Per-Action Waiting Periods in Laravel with the Cooldown Package Laravel Cooldown lets you place timed locks on named actions—OTP resends, password resets, payment retries—sco... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 16 Jul 2026 4 min read Read ](https://msaied.com/articles/enforce-per-action-waiting-periods-in-laravel-with-the-cooldown-package) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://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://msaied.com) - [Projects](https://msaied.com/projects) - [Articles](https://msaied.com/articles) - [Certificates](https://msaied.com/certificates) - [Contact](https://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)