Get your next remote job on LaraJobs.

How to force re-render a Livewire v3 component

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.

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
The latest community links

Recommended articles

Prevent a Livewire component from re-rendering

Improve the performances of your Laravel application by avoiding unnecessary re-renders of Livewire components.

Fix the /livewire/livewire.js 404 not found error

Learn how to fix the 404 not found error occurring for /livewire/livewire.js.

Laravel Volt: simplify how you write Livewire components

Laravel Volt is a great new addition to Laravel's extensive ecosystem that brings single-file components à la Vue.js to Livewire. Let me help you get started.

Discover how to craft an ever-present chat widget with Livewire v3's persistence features in Laravel - step-by-step guide included.

Create a SPA in seconds using wire:navigate in Livewire v3

Discover how to boost the speed of your Laravel apps, mimicking an SPA, without building an API, using Livewire v3 and the new wire:navigate attribute.

20+ Laravel best practices, tips and tricks to use in 2024

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

7 Laravel RESTful APIs best practices for 2024

Master the art of crafting RESTful APIs with Laravel thanks to these best practices.

- / -