Stop wasting time. Summarize and chat with YouTube videos using Nobinge.
Laravel Livewire

How to force re-render a Livewire v3 component

Benjamin Crozat
Published on Jan 10, 2024 0 comments Edit on GitHub
How to force re-render a Livewire v3 component

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.

Wait, there's more!

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • SaaSykit
    Launch your SaaS in days with a Laravel-based boilerplate.
    Get SaaSykit →
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -