Livewire 4: Faster, Simpler, and More Powerful!

Livewire 4 has officially launched, and it’s packed with exciting features aimed at making your Laravel development faster, easier, and more organized. Caleb Porzio unveiled these updates at Laracon US 2025*, and while we strongly recommend watching his talk, here’s a super simple breakdown of everything you need to know, with real-life examples!*

1. Single-File Components (SFC) Are the New Default

What Changed?

When you now run:

php artisan make:livewire Counter

Livewire 4 will create a single file that contains all the logic (PHP), HTML, and JavaScript for your component.

Example:

// counter.blade.php  
<div>  
    <button wire:click="increment">+</button>  
    <span>{{ $count }}</span>  
</div>  

<script>  
    // JS logic here  
</script>  

<?php  
class Counter extends Component {  
    public $count = 0;  
    public function increment() { $this->count++; }  
}  
?>

Why It’s Awesome:

You don’t have to switch between three different files. Everything is in one file—clean and compact!

Real-Life Example:

It’s like using a single notepad to jot down a recipe: ingredients, steps, and cooking notes, all in one place. Easy to manage and update!

2. Multi-File Components (MFC) When You Need More Structure

What Changed?

If your component starts growing and you want to separate things for better organization, run:

php artisan make:livewire profile --mfc

It will generate:

• Profile.php (Logic)

• Profile.blade.php (View)

• Profile.js (JavaScript)

• profile.test.php (Test file)

All in the same folder.

Why It’s Awesome:

Easier to maintain big components. You can focus on just the HTML or just the JS, without distractions.

Real-Life Example:

Imagine your kitchen tools, cutlery in one drawer, spices on one shelf, and cooking pots in a cabinet. Everything is separate but close together.

3. Livewire::visit(): Browser Testing Like a Human

What Changed?

Pest 4 introduces Livewire::visit(), letting you test Livewire components in a real browser (thanks to Playwright).

test('counter increments', function () {  
    Livewire::visit(Counter::class)  
        ->assertSee(0)
        ->debug()
        ->click('button')  
        ->assertSee(1);  
});

Why It’s Awesome:

You can test your Livewire components in the browser just like an actual user would click around. Great for catching real-world issues.

Real-Life Example:

Think of this as practicing a speech in front of a mirror. You get to see how it actually performs, not just how it looks on paper.

4. ⚡Blaze – Supercharged Rendering Performance

What Changed?

Livewire 4 introduces Blaze, a performance engine under the hood that makes rendering much faster.

Why It’s Awesome:

Pages load quicker. Updates happen in a snap. Less waiting means a better user experience.

Real-Life Example:

It’s like switching from a bicycle to an electric scooter. You’re still doing the same thing (going from A to B), but much faster!

5. Component Slots – Flexible and Reusable

What Changed?

Livewire components now support slots with syntax like {{ $slot }}.

<!-- alert.blade.php -->  
<div class="alert">  
    {{ $slot }} <!-- Content goes here -->  
</div>  

<!-- Usage -->  
<x-alert>  
    <p>Success! Your order is placed.</p>  
</x-alert>

Why It’s Awesome:

You can create flexible components and inject content wherever needed.

Real-Life Example:

Imagine a gift box where you can swap in a birthday card or a wedding card depending on the occasion. Same box, different content!

6. @island Directive – Isolate the Heavy Parts

What Changed?

With the @island directive, you can isolate expensive or slow parts of a component. You can even make it:

• Load lazily (lazy: true)

• Refresh (poll) every few seconds (@island(poll: '5s'))

<div>  
    <!-- Fast part -->  
    <h1>Welcome, {{ $user->name }}!</h1>  

    <!-- Slow part (isolated) -->  
    @island(lazy: true, poll: '5s')  
        <livewire:order-history />  
    @endisland  
</div>

Why It’s Awesome:

This boosts performance. Only the “island” loads when needed, not the whole page.

Real-Life Example:

Think of this like lazy-loading images on a long article. The full article loads quickly, and images load when they come into view.

Bonus: Placeholder Support While Islands Load

You can even display a skeleton loader or a loading message until the island content is ready:

@island(lazy: true)
    <x-loading-spinner />
@endisland

Real-Life Example:

It’s like showing a "loading…" screen while your food order is being prepared. Keeps the user informed and engaged.

Final Thoughts:

Livewire 4 focuses on developer experience (DX) and performance. Whether you're building small UI components or full dashboards, the new updates will:

• Simplify your workflow

• Improve performance

• Make testing easier

Next step? Watch Caleb’s talk from Laracon US 2025 and try these features in your next project.