Laravel: Livewire Lifecycle Hooks with Examples

Laravel Livewire is a robust framework for building sophisticated, dynamic interfaces with Laravel and Blade— without having to write a single line of JavaScript. One key component that adds to the flexibility of Livewire and its reactivity is its lifecycle hooks.

Lifecycle hooks provide you with control over what you want your component to do at different stages of the component’s lifecycle. In this blog post, we’ll explore what Livewire lifecycle hooks are, when they fire, and how you may utilize them to build more interactive and efficient components.

What Are Livewire Lifecycle Hooks?

In Livewire, the lifecycle hooks are methods that you can define in your component classes that Livewire will automatically invoke when certain points of that component’s lifecycle occur. These lifecycle hooks are a great way to perform these actions when:

• The component is being constructed
• The properties are updated
• Whenever a method is called
• The component is being re-rendered

By taking advantage of these lifecycle hooks, you can build more intelligent and reactive interfaces.

Livewire Lifecycle Hooks

Mount (mount())

Called and executed when the component is first being constructed. It’s ideal for setting up initial state values.

Use case: If you wanted to set default values when your component was loaded.

Example:

use Livewire\Component;
class Counter extends Component
{
    public $count;
    public function mount()
    {
        $this->count = 0;
    }
    public function render()
    {
        return view('livewire.counter');
    }
}

Hydrate (hydrate())

This is fired when Livewire signals to rehydrate the object from a previous request on every request.

Use case: Handy for re-initializing services or other non-serializable, non-scalar objects.

Example:

public function hydrate()

{
    logger('Component is being hydrated.');
}

Updating (updating<PropertyName>)

Runs prior to a property being updated.

Use case: Useful for validating or limiting the values prior to the change.

Example:

public function updatingNumber($value)
{
    if ($value >= 10) {
        $this->number = 10; 
    }
}

Updated (updated<PropertyName>)

This runs after the component has been updated.

Use case: React to a change in data, trigger side effects.

Example:

public function updatedNumber($value)
{
    logger("Number updated to: $value");
}

Rendering (render())

This defines what the component looks like. This runs on the initial render and when the state updates.

Use case: Passing computed data to views.

Example:

public function render()
{
    return view('livewire.counter', ['doubleCount' => $this->count * 2]);
}

Dehydrate (dehydrate())

This runs just before the updated state is sent to the front end.

Use case: Cleanup operations or final adjustments before Livewire sends updates.

Example:

public function dehydrate()
{
    logger('Component state is being sent to frontend.');
}

Destroy (destroy())

This runs when the component is destroyed from the page.

Use case: Cleanup, logging, or disconnecting external services.

Example:

public function destroy()
{
    logger('Component is being destroyed.');
}

Boot (boot()) & Booted (booted())

boot(): This runs once when the component is instanced.

booted(): This runs after mount().

Use case: Initialization logic, such as making service injections.

Example:

public function boot()
{
    logger('Component is booting.');
}
public function booted()
{
    logger('Component has booted.');
}

Final Thoughts

Laravel Livewire lifecycle hooks provide a structured way to control your component logic at the right time. They will help to make your components much more powerful, flexible, and maintainable by help connecting the gap between the backend and frontend.

Whether building forms, dashboards, or real-time features, developing a strong understanding of these hooks will help elevate your Livewire skills.