Introduction to Lifecycle Hooks in Livewire - Laravel Livewire Crash Course for Beginners

thanks to hostinger for sponsoring this video are you looking for a reliable and affordable VPS hosting hostinger offers an exclusive Black Friday deal under VPS subscription plan you can get a 12mon VPS hosting plan for just $6.99 per month which is a whooping 63% discount but wait there is more you can also use my code which is code with Ari to get 10% discount on top of the discount that hosting or offers don't miss out on this amazing offer and take your website to the next level with hosting or powerful VPS hosting what's up developers it's Dory here and welcome back to the eth video of my larel lifewire video series where we'll have a look at how we could work with life cycle hooks life cycle hooks on larel lifewire are special methods that allow you to perform certain actions at different stages of a lifewire component's life cycle these hooks are executed automatically by lifewire providing you with the ability to interact with the component's life cycle events we have already worked with one life cycle hook so let's navigate back to PHP storm for a moment and let's open our task index because right here you'll see how we have defined the mount method which once again is called when the component is first instantiated and mounted in addition to the amount method lifewire support six other life cycle hooks once you become familiar with them you will find yourself using them frequently now let's cover all of them right inside of our task Index right below the mount method the second life cycle Hook is called public function hydrate this Hook is called when the component is hydrated with data from the server the third life cycle hook that we have is the public function boot method which is called at the beginning of every request both initial and subsequent we have the public function updating which is called before lifewire updates the components data properties with user input then we have the public function updated which is called after the components data properties have been updated we have the public function rendering which is called before the where is it render method is being called and then we got the public function rendered which is called after the render method is called and finally we have have the public function dehydrate method which is called at the end of every component request these hooks provide a way to perform accent such as initializing data making API calls manipulating data and way more at specific points in the live fire component cycle now let's scroll up and let's start inside the hydrate method first now once again the hydrate method is a life cycle hook that is called when the component is hydrated with data from the server life fire basically need to send data back and forth between PHP and JavaScript for it to work with the way it does as part of the messages that get sent there is information about the component and information about the properties but for the information to be accessible and usable by JavaScript it needs to be in the right format the process of hydration is taking the messages and converting its value back into PHP creating the life VAR component and creating any of the properties that components has now let's actually add a simple DD right here for a moment of okay let's navigate back to the browser let's refresh the page and try to create a new task so let's say task two click on new task and right here you will see that the die dump has been printed out because the hydrate runs at the beginning of every subsequent request now the second method that I want to cover quickly is the boot method so let me comment out the DD and the boot method in live VAR is a life cycle hook that is called at the beginning of every request both initial and subsequent it allows you to perform any necessary initialization or setup tasks before the component starts processing their request now you probably might wonder what the difference is with the amount method as helpful as the mount method is it only runs once per component life cycle and you may want to run logic at the beginning of every single request to the server for a given component so what you could do right here and instead of initializing the task property in the mount method is basically copying what we got right here commenting it out pasting it in the booth method if we navigate back to the browser and refresh it you'll see that the tasks are still visible and this can be especially useful when you need to perform certain tasks before every request regardless of the specific action being performed and well we want to specify the tasks property that we have to finded before any action is being performed now the updating method in larel life wire is a life cycle hook that is called before lifewire updates the component data properties with user input this hook allows you to perform any necessary actions of validation before the component's data is updated now I currently don't have any updating data so I will skip this one but the name of the method basically says what it does then we have the updated method which is a cycle hook that is called after the component's data properties have been updated it allows you to perform any necessary actions or manipulation after the data has been updated this Hook is particularly useful when you need to react to changes in the component's data and perform additional logic based on those changes now once again I'm going to skip this one as well and I'm going to continue one with the rendering method like I've mentioned before this is called before the rendered method is called it allows you to perform any necessary action or manipulation before the component is rendered The View method has two arguments that we can Define the first is view while the second one is named data both represent data that have been added inside the render method The View argument is the actual view that's going to be rendered while the data is the data that is being passed through the view so let's quickly add a DD right here of view if we now get back to Google Chrome and refresh it and right here you will see that task index. blade. PHP has been rendered if we open the data you will see that we're passing in a button our tasks property our name property and the layout configuration we navigate back to PHP store output the data you'll see that the properties that we have to find are all printed out so what the rendering method basically allows you to do is modifying the data since the rendering method is being called before the view is rendered so let's actually modify the name property because right now it has been set equal to null so what we could do is basically say well data bracket name is equal to D and let's then DD the data if we then refresh the browser you will see that name have been set now let's move on to the next method which is the rendered method which is a life cycle hook that is called after the render method has been called and the component has been rendered in the rendered method you can access the rendered View and the data pass to the view so we need to pass in once again two arguments but the first one is view while the second one is HTML now I'm not going to Output The View because it's the same view variable as in the rendering method but if we DD let's say HTML refresh it you'll see that the entire HTML of the page has been printed out which is pretty cool and finally we have the dehydrate method which is called at the end of every component's request it allows you to perform any necessary cleanup or finalization task before the component is finished processing their request now after a request has been performed I want to convert my collection to an array so what we could do right here is basically say well this tasks is equal to this tasks but we're going to add the two array methods to it if we then output this tasks refresh it you will see that the output is an array right now now I want to wrap up this video where we have covered all the life cycle hooks in life wire and the next video I want to have a look at how we could deploy our life warer project on a VPS hosting if you do like my content and you want to see more please leave a like and if you're new to this channel don't forget to hit that subscribe button

Channel: Code With Dary

Views: 997

Keywords:

Id: BMjZFbG3S8A

Length: 8min 59sec (539 seconds)

Published: Wed Nov 15 2023