Quick Guide to Livewire Lifecycle Hooks

If you're working with Laravel Livewire, understanding lifecycle hooks is essential for building reactive components that feel smooth and responsive. Lifecycle hooks are methods that Livewire automatically calls at specific points during a component's lifecycle, giving you control over what happens when your component is created, updated, or rendered.

The Essential Hooks You Need to Know

Livewire provides several hooks, but let's focus on the ones you'll use most often:

1. Mount - Initialize Your Component

mount() runs once when your component first loads. This is where you set up initial data:

class UserProfile extends Component
{
    public $user;
    public $posts;

    public function mount($userId)
    {
        $this->user = User::findOrFail($userId);
        $this->posts = $this->user->posts()->latest()->get();
    }
}

💡 Tip: Route parameters are automatically injected into mount(), just like Laravel controllers.

2. Updated - React to Property Changes

The updated{PropertyName}() hook fires after a property changes. Perfect for search functionality or form validation:

class SearchComponent extends Component
{
    public $query = '';
    public $results = [];

    public function updatedQuery($value)
    {
        if (strlen($value) < 3) {
            $this->results = [];
            return;
        }

        $this->results = Product::search($value)->take(10)->get();
    }
}

This creates a search-as-you-type experience without writing any JavaScript.

3. Hydrate and Dehydrate - Managing State

Every Livewire request serializes your component's state. hydrate() runs at the start of each request, and dehydrate() runs at the end:

class ShoppingCart extends Component
{
    protected $cartService;

    public function hydrate()
    {
        // Reconnect to services that can't be serialized
        $this->cartService = app(CartService::class);
    }

    public function dehydrate()
    {
        unset($this->cartService);
    }
}

⚠️ Warning: Objects like database connections or service instances can't be serialized. Use these hooks to reconnect and clean up.

A Practical Example

Here's how these hooks work together in a real component:

class ProductFilter extends Component
{
    public $category = 'all';
    public $priceRange = [0, 1000];

    public function mount($defaultCategory = 'all')
    {
        $this->category = $defaultCategory;
    }

    public function updatedCategory()
    {
        // Reset price when category changes
        $this->priceRange = [0, 1000];
    }

    public function render()
    {
        $products = Product::query()
            ->when($this->category !== 'all', 
                fn($q) => $q->where('category', $this->category))
            ->whereBetween('price', $this->priceRange)
            ->get();

        return view('livewire.product-filter', [
            'products' => $products
        ]);
    }
}

Common Mistakes to Avoid

Don't put dynamic logic in mount:

// ❌ This won't update when filters change
public function mount()
{
    $this->products = Product::where('status', $this->filter)->get();
}

// ✅ Put it in render() instead
public function render()
{
    return view('livewire.products', [
        'products' => Product::where('status', $this->filter)->get()
    ]);
}

Watch out for infinite loops:

// ❌ This creates an infinite loop
public function updatedSearchQuery($value)
{
    $this->searchQuery = strtolower($value); // Triggers the hook again!
}

// ✅ Use updating() instead
public function updatingSearchQuery($value)
{
    return strtolower($value);
}

Quick Reference

Hook	When to Use
mount()	Initialize data once on component load
updated{PropertyName}()	React after a property changes
updating{PropertyName}()	Transform/validate before a property changes
hydrate()	Reconnect to services on each request
rendered()	Trigger JavaScript after component renders

Want to Learn More?

This is just scratching the surface of Livewire lifecycle hooks. There are more hooks like rendering(), rendered(), and property-specific hooks for nested data that can help you build even more sophisticated components.

Read the full article for:

• Detailed explanations of all lifecycle hooks
• More real-world examples and use cases
• Performance optimization tips
• Advanced patterns for complex components
• Complete decision tree for choosing the right hook

Understanding these hooks will help you write cleaner, more maintainable Livewire components. Start with mount() and updated{PropertyName}() for most cases, and explore the others as your needs grow.

---

What lifecycle hooks do you use most often? Share your experience in the comments!