In this video we are going to learn about Livewire Life Cycle Hook.
A Life Cycle of livewire application includes various changes.
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 reason.
Such as control DOM update when the value of property changes.
Show a message to the client when some lengthy task is being performed.
set or unset properties etc.
So lets see how livewire life cycle hook works.
So First of all lets 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 project and lets 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 lets create some property here.

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

Now Lets add the life cycle hook methods First life cycle hook is mount,
This is the first hook method to be executed and runs before the render() a 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 hydrate hook.
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 updating hook
Updating Hook Triggers before when any of the properties are to be updated.

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

And 4th hook method is updated hook.
Updated hook Triggers after component property updated.

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

5th hook is updatingProperty
which Executes before the property $name is to be updated. 

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

Lats hook is updatedProperty
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 lets 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>

Now display these property    

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

And here lets display, infos array property , it shows which hook method is executed.  

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

Now lets check this.
So switch to the browser and go to the url /product.
And here you can see first hook method which is executed before rendering this component.
Now lets 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 here these UpdatingName and UpdatedName hooks are not executed.
Because we are updating this title property not this name property.
Now lets 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.