How to force re-render a Livewire v3 component

Benjamin Crozat

Published on Jan 10, 2024 • 0 comments • Edit on GitHub

Introduction to re-renderings in Livewire v3

Forcing components to re-render in Livewire is the secret for a better user experience. Keeping lists in sync by defering their management to the top component is the easiest way to do it. But sometimes, that’s just not enough and that where this article comes in handy.

Create an empty listener method

Let’s say that for some reasons, you have a child component that handles creating new resources and therefore, prevents the parent component from refreshing the list.

Well, I have a solution for you: create an empty listener method in your parent component.

Here’s the child component’s class:

namespace App\Livewire;

use Livewire\Component;

class Item extends Component
{
    public function create()
    {
        // Create the resource.

        $this->dispatch(‘created’);
    }
}

And here’s your parent component’s class, using the Livewire\Attributes\On attribute to let Livewire know it’s waiting for a given event:

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\On;

class Listing extends Component
{
    #[On(’created’)]
    public function refresh()
    {
    }
}

You can learn more about listeners in Livewire on the official documentation.

Use the secret $refresh method

Alternatively, you can listen for the “created” we made up for this article right in DOM. It’s a matter of preference, because both methods will work and produce the exact same result.

Here’s the parent component’s Blade view:

<div @created=“$refresh”>
    @foreach ($items as $item)
        <livewire:item :$item />
    @endforeach
</div>

You can also call it form Alpine.js using $wire.$render.