Laravel 8 Tutorial - Livewire Life Cycle Hook

In this tutorial, we are going to learn about Livewire Life Cycle Hook.

A Life Cycle of a Livewire application includes various changes that the application has to go through in order to be completed.

The Laravel Livewire provides 6 types of Life Cycle Hook methods, so that we can make use of these methods for various reasons, such as:

• Controlling DOM update when the value of a property changes.
• Showing a message to the client when some lengthy task is being performed.
• Setting or unsetting properties, etc.

So, let's see how Livewire Life Cycle Hook works.

So, first of all, let's create a Livewire component. So, switch to the command prompt and run the following command:

php artisan make:livewire Product

Now, run the application:

php artisan serve

Now, switch to the project and let's create the route for this component. So, just go to the web.php file and create the route:

Route::get('/product',Product::class);

Now, go to the Product.php component class file and let's create some properties here:

public $title;    
public $name;
public $infos=[];

Now, let's add the Life Cycle Hook methods. The first Life Cycle Hook is mount, which is the first hook method to be executed and runs before the render() method is called. When this mount is executed, then just push this text inside the array:

public function mount()
{
    $this->infos[] = 'Application is mounting....';        
}

Next method is the hydrate hook. The hydrate Hook executes on every request to the server and before any changes to be performed, such as updating, saving, or any other action.

public function hydrate()
{
    $this->infos[] = 'Application is hydrating....';
} 

Next hook is the updating hook. The updating Hook triggers before when any of the properties are to be updated.

public function updating($name, $value)
{
    $this->infos[] = 'Application is updating....';
} 

And the 4th hook method is the updated hook. The updated Hook triggers after the component property is updated.

public function updated($name, $value)
{
    $this->infos[] = 'Application is updated....';        
}

The 5th hook is the updatingProperty hook, which executes before the property $name is to be updated.

public function updatingName($value)
{
    $this->infos[] = 'Application is updating Name Property....';
}

The last hook is the updatedProperty hook, which executes after the property $name is to be updated.

public function updatedName($value)
{
    $this->infos[] = 'Application is updated Name Property....';
}

Now, go to the product.blade.php view file and let's add two input text fields and bind with properties:

<div>    
Title : <input type="text" wire:model='title' /><br>    
Name : <input type="text" wire:model="name" /><br>
</div>

Now, display these properties:

Title : {{$title}} <br>
Name : {{$name}} <br>

And here, let's display the infos array property, which shows which hook method is executed.

<h3>Lifecycle Hooks Methods</h3>
    @foreach ($infos as $index=>$info)
        <h3>{{$index+1 . ' - ' . $info}}</h3>
    @endforeach
</div>

Now, let's check this. So, switch to the browser and go to the URL /product.

And here, you can see the first hook method, which is executed before rendering this component.

Now, let's enter the text inside this title textbox.

And here, you can see the first executing the hydrating, then updating, after updating the property, this updated hook is executed.

And here, you have noticed that these UpdatingName and UpdatedName hooks are not executed, because we are updating this title property, not this name property.

Now, let's enter some text inside this input field.

And now, you can see here. Hydrate hook executed first, then updating, then property updating.

After updating, just executed updated and updated Name property.

So, in this way, Livewire Life Cycle Hook works.