What are Livewire Lifecycle Hooks?
Lifecycle hooks in Livewire allow you to execute logic at specific stages of a component’s lifecycle. They give you precise control over how and when certain parts of your component are rendered or updated. Livewire 3.0 introduces new hooks that make components more powerful and flexible.
Step 1: Common Lifecycle Hooks
Here are some commonly used lifecycle hooks in Livewire 3.0:
1. mount()
Called when the component is initialized.
public function mount($id = null)
{
$this->product = Product::find($id);
}
2. render()
Called to render the component’s Blade template.
public function render()
{
return view('livewire.product-detail');
}
3. updated($propertyName)
Triggered after a property is updated.
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
Step 2: New Lifecycle Hooks in Livewire 3.0
1. commit.prepare
Triggered before changes are committed to the DOM.
public function commitPrepare()
{
// Pre-process data before committing to the DOM
}
2. morph.updated
Runs after the DOM has been updated with changes.
public function morphUpdated()
{
// Handle logic after the DOM is updated
}
3. hydrate()
Executed when the component is hydrated on a subsequent request.
public function hydrate()
{
// Perform actions like loading fresh data
}
Step 3: Building a Component with Advanced Hooks
Let’s create a Product Detail Component that uses advanced lifecycle hooks for real-time updates and seamless DOM interaction.
Component Setup
Run the command to create the component:
php artisan make:livewire ProductDetail
ProductDetail.php
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Product;
class ProductDetail extends Component
{
public $product;
public function mount($id)
{
$this->product = Product::find($id);
}
public function hydrate()
{
// Ensure product data is always fresh
$this->product = Product::find($this->product->id);
}
public function render()
{
return view('livewire.product-detail', [
'product' => $this->product,
]);
}
public function commitPrepare()
{
// Logic before DOM update
}
public function morphUpdated()
{
// Logic after DOM update
}
}
Step 4: Adding SPA-Like Navigation
Livewire 3.0 introduces SPA-like navigation for building seamless, single-page applications without a front-end framework. You can now navigate between components without a full-page reload.
Setup SPA-Like Navigation
In your web.php routes file, define the routes:
use App\Http\Livewire\ProductDetail;
Route::get('/product/{id}', ProductDetail::class)->name('product.detail');
Product List Component
Create a simple product list with clickable links:
<div>
<ul>
@foreach ($products as $product)
<li>
<a href="{{ route('product.detail', $product->id) }}" wire:navigate>{{ $product->name }}</a>
</li>
@endforeach
</ul>
</div>
wire:navigate
The wire:navigate directive enables SPA-like navigation between components without refreshing the page.
Step 5: Combining Lifecycle Hooks with SPA Navigation
Here’s how lifecycle hooks and SPA navigation work together:
mount(): Initializes the product data when navigating to a product detail page.hydrate(): Ensures data is refreshed when navigating back.commit.prepareandmorph.updated: Provide fine control over DOM updates during navigation.
Final Output
With the above setup, your application will:
Load product details dynamically without full-page reloads.
Provide seamless SPA-like navigation between pages.
Use advanced lifecycle hooks for real-time updates and data freshness.