Introduction to re-rendering prevention in Livewire

I previously talked about various ways to re-render a Livewire component. But now, let’s do a 180° and talk about doing the opposite: preventing re-renders!

Block re-renders in a Livewire component

Sometimes, you might want to run an action or listen to an event in a Livewire component. Problem is: this triggers a re-render. The solution? The new Livewire\Attributes\Renderless attribute!

namespace App\Livewire;
 
use Livewire\Component;
use Livewire\Attributes\Renderless;
 
class Show extends Component
{
    #[Renderless] 
    public function incrementViewCount()
    {
        $this->model->incrementViewCount();
    }
}

This can be a huge win for the performances of your Laravel application.

Oh and by the way, if you still can’t deal with PHP’s new attributes, you can use the skipRender() method like so:

namespace App\Livewire;
 
use Livewire\Component;
 
class Show extends Component
{
    public function incrementViewCount()
    {
        $this->model->incrementViewCount();

        $this->skipRender();
    }
}

Did you like this article? Then, keep learning:

• Add Alpine.js to enhance your Laravel apps with a lightweight JS framework
• Learn about Alpine.js framework that compliments Laravel well for interactive UI
• Improve error handling using Laravel's HTTP client for robust API integration
• Learn Laravel's fake() helper to generate test data for smoother development
• Master Laravel's query builder for more efficient, flexible database queries
• Discover Laravel Volt to streamline your Livewire component development
• Fix common Livewire asset loading errors for smooth operation
• Build SPA-like experiences in Laravel using Livewire v3 features
• Learn how to force re-rendering for better control in Livewire components