Private arrays with Livewire

@vincent15000, @snapey is right because it to do with how Livewire life-cycle works.

Let me step you through the logic so it clear for you, then I'll suggest 2 alternative ways of doing it rather than putting it in the render method.

In Livewire 3, when you type into an input with wire:model.live (or wire:model), Livewire performs AJAX requests on each keystroke. Each request:

1. Sends the public properties to the server.
2. Re-renders the component on the server.
3. Sends back the updated DOM.

Private properties are not part of the payload because Livewire only syncs public properties with the frontend.

So, if you initialise your private arrays in mount() method, example like this:

private array $myArray;

public function mount()
{
    $this->myArray = ['a', 'b', 'c'];
}

Then as soon as Livewire sends a request from wire:model.live. Livewire creates a new instance of your component on the server and only hydrates public properties from the previous state. Private properties are not restored, so $myArray is now empty unless reinitialised

@snapey suggested reinitialising the private arrays in the render() method. This works because render() is called on every request, so your private arrays are reset each time.

Remember: ** In Livewire 3, private properties are never persisted across requests, so you always need to reinitialize them somewhere (render(), hydrate(), or make them public and control dehydration)**

Now you could do something very similar to @snapey using the hydrate method like this example

use Livewire\Component;

class MyComponent extends Component
{
    private array $myArray;

    // Initialize once on first mount
    public function mount()
    {
        $this->myArray = ['a', 'b', 'c'];
    }

    // Ensure private data exists on every Livewire request
    public function hydrate()
    {
        if (empty($this->myArray)) {
            $this->myArray = ['a', 'b', 'c'];
        }
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}

The above works but I think it looks a bit messy.

What I normally do is use Livewire computed properties. No need for private + hydrate() trick and data stays server-only, computed each request. Here an example

use Livewire\Component;

class MyComponent extends Component
{
    public int $userId;

    #[Computed]
    public function myArray(): array
    {
        // Computed each render; never sent to frontend directly
        return ['a', 'b', 'c', 'user' => $this->userId];
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}

Now if the Computed is a database query and you don't want to keep looking up the same information again and again, I normally use the cache facade something like this for example.

class MyComponent extends Component
{
    public int $userId = 1; // example public property

    #[Computed]
    public function user(): ?User
    {
        // Cache the result for 10 minutes
        return Cache::remember("user_{$this->userId}", now()->addMinutes(10), function () {
            return User::find($this->userId);
        });
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}

Important

• Computed methods cannot be private. They must be public to be recognized by Livewire.
• They are read-only. You cannot bind wire:model to them.
• Good for static arrays, derived data, server-only calculations, etc.

#[Computed] is cleaner replacement for private arrays used only on the server if your array doesn’t need to be modified by Livewire requests.

If you need to store state that changes and must survive requests, then you still need public properties + hydrate().