Laravel Livewire Course - Component Lifecycle

In Livewire we have multiple functions that we can use and that are called automatically based on the state of the component this happens in many other cases in other technologies such as Android Flutter Vue and these to name a few they are extremely useful because with them we can perform processes that would otherwise be complicated to define for example initializing properties as we will do later when we want to edit a record or category

In order to clearly understand what happens when these lifecycle methods are executed activate the system log at the file level since we will use it later

LOG_CHANNEL=single

With the logs for the files remember that they are recorded in

'path' => storage_path('logs/laravel.log'),

In our Savephp component of the categories we are going to define the following methods

use Log;
***
public function boot()
{
    Log::info("boot");
}

public function booted()
{
    Log::info("booted");
}

public function mount()
{
    Log::info("mount");
}

public function hydrateTitle($value)
{
    Log::info("hydrateTitle $value");
}

public function dehydrateFoo($value)
{
    Log::info("dehydrateFoo $value");
}

public function hydrate()
{
    
    Log::info("hydrate");
}

public function dehydrate()
{
    Log::info("dehydrate");
}

public function updating($name, $value)
{
    Log::info("updating $name $value");
}

public function updated($name, $value)
{
    Log::info("updated $name $value");
}

public function updatingTitle($value)
{
    Log::info("updatingTitle $value");
}

public function updatedTitle($value)
{
        Log::info("updatedTitle $value");
}

These methods which are part of the view cycle print a message in the system log that corresponds to the name of the method and if the method receives parameters they also record them in the log these parameters are either values or names and values

As tests you should perform

1. Access your log
2. Remove any logs that exist in that file
3. Save the changes to that file
4. Access the Savephp component through your browser
5. Review the log
6. Click the submit button on the form
7. Review the log
8. Type something into one of the text fields in the wiremodel
9. Review the log

The idea is that you go through testing deleting the log content and testing components that directly update properties such as wiremodel type fields entering the component for the first time and clicking on buttons that do not update the wiremodel data

storage/logs/laravel.log

[2022-03-23 17:07:15] local.INFO: boot  
[2022-03-23 17:07:15] local.INFO: mount  
[2022-03-23 17:07:15] local.INFO: booted  
[2022-03-23 17:07:15] local.INFO: render  
[2022-03-23 17:07:15] local.INFO: dehydrate  
[2022-03-23 17:07:18] local.INFO: boot  
[2022-03-23 17:07:18] local.INFO: hydrateTitle   
[2022-03-23 17:07:18] local.INFO: hydrate  
[2022-03-23 17:07:18] local.INFO: booted  
[2022-03-23 17:07:18] local.INFO: updating title asas  
[2022-03-23 17:07:18] local.INFO: updatingTitle asas  
[2022-03-23 17:07:18] local.INFO: updated title asas  
[2022-03-23 17:07:18] local.INFO: updatedTitle asas  
[2022-03-23 17:07:18] local.INFO: render  
[2022-03-23 17:07:18] local.INFO: dehydrate  

 

Of course we can leverage these functions to perform crucial processes for our component such as initializing data when creating a component

There are three main blocks here

1. The update type functions are called when the component properties are updated for example like the wiremodel there are variants such as updated and updating which work the same except that the update is executed first
   1. We also have the updateProperty variant which we can bind to a property
   2. When executing the updated function the property has not yet been updated when executing updated the property has already been updated
2. Hidrate functions are used when we pass data between the view and it maps it to an object in PHP in the component class for example when mapping the properties to a JSON to pass them to the view for the wiremodel

 

1. The dehydrate functions are used for exactly the opposite of the hidrate functions that is they are used when we pass data between the component class to the view for example when mapping properties to a JSON to pass them to the view for wiremodel

 

1. Ultimately these functions are for componentlevel updates in message passing not just component data
2. Basic lifecycle functions such as render boot or booted are executed as part of the lifecycle when updating the component
3. In this line there is also the mount function which is executed only once when mounting the component unlike the previous ones as you can see in the log mentioned above

In conclusion the most used functions for the life cycle of components are update in any of its variants and mount to initialize data

Video Transcript

We are going to see something very interesting that would be the life cycle of the component and it is something that even if it is you can inherit a little or inherits a little of what would be the controller here in the controller or the classic scheme that we have in Laravel there is really no life cycle but even if it is Ah we have a constructor method that we could take advantage of or that is executed before what is the method itself, that is to say when we are going to resolve the request there Here we also have something a little better similar but more vitaminized as you can see and this also closely resembles what would be View that we have a life cycle for the components and that we can take advantage of to do several things I am really going to present it to you it is purely for reasons like who says theoretical but really what we usually use in 100% of the cases or the majority of the cases is the dem Mount that is for when the component is mounted and we take advantage of it to initialize well the Data for example we would like to Search for a post or something like that we do it right here in the demount for the rest we have others as I was telling you but usually not we use it so much good for obvious reasons I'm not going to write this manually so as not to take all day so I ask you to go to the last class of this section where the source code is, click on it and look for this code that I'm going to leave it commented there exactly in the categories component which is the one we have here to date the save one I'm going to leave it commented there good for you I'm going to place it remember to import the log here too I already explained the exercises a little although I think it is already understood enough the log one is being Well I think this what we are going to do is print some messages by the batch to see when each of these methods is called So we are going to place the log Channel of type single here we can place it in the F the Channel to see if it appears I don't think it is not log Channel equals single laravel log lot I think it is not Well remember that this is generated in storage logs if it is it is a little crazy that sometimes I look for it and it is not found I am going to remove all this and we will see what happens we return here we reload and notice that they already appear here several of these methods, the Boot method, the Mount method, which is, as I told you, the one we are going to use the most and others, so here you can click on the buttons a few times and the rest will gradually appear here. Note that, for example, in the deting, it appears what the property is, the name of the property and the value, so in case you want to do some global control there for whatever the meaning is, you can take advantage of it. For the rest, there really isn't much more to say in the course, we are practically not going to use any section of the m method, which again is the most useful and the one that is usually always used in most cases to prepare the Data that the component is going to need in order to work, and we are going to see this in a little more detail later on when we need to initialize some Data there. So that's basically it. For the rest, I don't think there is any greater mystery. Well, remember that you can go here for a little bit to the official documentation. In case you are interested in knowing a little more for sure what each one of them is for, here I will explain it to you a little bit. If you want, you can pause the class and read it here. just as I classify them for you a little, the type functions are invoked When updating the properties of our template as I showed you before, the did are used when we pass data between the view and it maps it to an object in our component class, there they are also invoked as you can see, we did the test just now Remember that as soon as we load the page, the component here only a few appeared and when we updated here and here the Y hydrate type also appeared, so here it tells you which one is being updated And this is exactly the opposite for when we pass data between the component class to the view and the functions and these are as who says part of the basic cycle that are the render type, the Boot type, the booted type and also the mounted type are already part of the life cycle of our component and are the ones we use the most, again the one we would use the most here would be the mounted to initialize but in the end you can classify it as that type, the mountex type, you can forget a little about the rest, well obviously here the render to render here our template, the dirate type In case they are necessary for you to do something and hydrate them, which would be a little more useful here on the list again, more information and you have the official documentation. I explain this to you so that you understand how livewire is formed and its basic structure, but really, this is not something as widely used as I have told you before, so good or once this is cleared up we can finish this class again Remember that Im going to leave all of this commented here for you In case you want to perform tests and in case it is necessary to use any of them later on we will go into a little more depth on each one of them or on the necessary one So lets go on to the next class

27-08-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Laravel Livewire Course - Component Lifecycle