Optimizing Livewire State: Public Properties vs. Computed Properties

In Laravel Livewire v3, the way you store and retrieve data determines your application's responsiveness. A common mistake is storing large database collections in public properties, which forces Livewire to serialize that data into JSON and send it back and forth with every network request. This leads to bloated payloads and sluggish UI updates.

Comparison of State Management Strategies

Feature	Public Properties	Computed Properties ([Computed])
Primary Use	Form inputs, toggles, user state.	Read-only data, filtered lists, aggregates.
Persistence	Persists across requests via hydration.	Server-side; recomputed every request.
Payload Impact	High (entire data sent to client).	Low (only the final result sent).
Performance	High overhead for large arrays.	Cached within single request lifecycle.

When to Use Public Properties

Public properties are essential for data that needs to change based on user interaction. Because Livewire synchronizes these properties between the browser and the server, any change made in the UI is automatically reflected on the backend. However, you should avoid storing Eloquent collections or large arrays here. If you store a collection of 500 models in a public property, Livewire must serialize all 500 models into the JSON payload on every click event, significantly increasing latency.

When to Use Computed Properties

Computed properties, defined using the #[Computed] attribute, are for data that is derived from other values. They offer two major advantages: first, they are not sent in the client-side payload, keeping the network light. Second, they are cached for the duration of a single request. If you reference a computed property multiple times in your Blade view, the underlying logic only runs once.

Practical Implementation: Searchable Products

This example demonstrates a product list where we use a public property for the search query (the input) and a computed property for the filtered results (the derived data).

namespace App\Livewire;

use App\Models\Product;
use Livewire\Component;
use Livewire\Attributes\Computed;

class ProductList extends Component
{
    // Public because we need to capture the user's typing
    public string $search = '';

    #[Computed]
    public function products()
    {
        // This query only runs once per request
        // and the result is not stored in the JSON payload
        return Product::where('name', 'like', '%' . $this->search . '%')
            ->get();
    }

    public function render()
    {
        return view('livewire.product-list');
    }
}

In your Blade template, you access the computed property as if it were a variable ($this->products):

<div>
    <input type="text" wire:model.live="search">

    <ul>
        @foreach($this->products as $product)
            <li>{{ $product->name }}</li>
        @endforeach
    </ul>
</div>

Verifying Performance

To ensure you are using computed properties correctly, use the browser's Developer Tools:

• Open the Network tab and filter by XHR.
• Type in your search input.
• Click the Livewire request (update).
• Check the Payload section. If you used a computed property, you will only see the filtered product IDs, not the full model data.