Introducing lifecycle hooks0:00
A pretty commonly used feature in Livewire is lifecycle hooks, and those are methods that you call or use, like let's say mount, to hook into different parts of the lifecycle. What a horrible definition, because I just used the name and the definition. But you know exactly what I mean. So you have this mount method here, and this allows you to basically hook into any time a new component is mounted on the page. So before it gets to the browser, as soon as it's booted up in php, it's going to call this method, and you can do stuff, like let's say right now these to-dos are hard-coded, but in reality you're not going to have those hard-coded, you're probably going to get something like that from the database.
but in reality you're not going to have those hard-coded, you're probably going to get something like that from the database. So you might do in the mount method, because you can't just in here, you can't just say like toDos all, you know, like that's illegal in php. So you would instead need a method like this mount method to say $this->toDos equal, and then maybe you did like auth()->user()->toDos->all(), or something like that. But we're not going to actually use the database, so we'll just hard-code them in here. Did I lose? Yeah, okay, there we go. We'll hard-code them in here, and let's implement this mount method and get the most important
Implementing the mount hook1:07
Yeah, okay, there we go. We'll hard-code them in here, and let's implement this mount method and get the most important lifecycle hook done. So they are not rendered here because this lifecycle hook does not work yet, but let's do it. So in our Livewire php, this big Livewire God thing, we have initial render. That's the function that news up the component and then puts it out on the page. So this is very straightforward, and this is actually how it works in real Livewire, as you might think. You just find the places where you need to call the hook, and then you do it.
as you might think. You just find the places where you need to call the hook, and then you do it. So here we'll say if method exists on the component, we're looking to see if the mount method exists, and then if it does, we'll just call it. So component->mount(), that's it. That is literally the mount lifecycle hook. It is not that different in the actual Livewire code base. So refresh, and there we go. One to-do, two to-dos, perfect. There's lots of other lifecycle hooks.
Adding updated hook behavior2:00
One to-do, two to-dos, perfect. There's lots of other lifecycle hooks. The only other one I think is interesting enough to add is the updated hook. So there's an updated hook where every time a property is updated, it gets called, and you use it for things like real-time validation. So let's say we wanted to validate that a draft is filled and not empty, so you can't add empty drafts, then you might do some validation in here. So I don't know. In this case, let's not even do that. Let's just say draft equals, and then just make it uppercase.
In this case, let's not even do that. Let's just say $draft equals, and then just make it uppercase. So strtoupper, why can't I autocomplete that? strtoupper, this $draft. So that's gonna be our lifecycle hook, yeah. So how do we know that the $draft is the thing being updated? Well, actually, in Livewire, the property name is passed as the first argument so that you can check that it is $draft, but also you can do this in Livewire. You can say updatedDraft, and it'll look for a method with that name and then call that hook.
Wiring updated hooks into updates2:54
You can say updated draft, and it'll look for a method with that name and then call that hook. So let's just do that because I don't know, why not? All right, if we scroll down to this update property, that method we added when we implemented WireModel in the last video, let's do the updating of the property, and then let's add the hook down here. So first, we're dynamically generating this method name, so let's do that. Let's say updated, maybe we could just say method, or I don't know, updated hook. Maybe we'll call it that. updated hook equals updated, but we need to concatenate on, and let's use php, sorry,
Maybe we'll call it that. Updated hook equals updated, but we need to concatenate on, and let's use php, sorry, Laravel's string helper, Str::title, and then pass in property. In Str::title, what that does is it takes any string, and it makes sure that each word starts with a capital letter. So this way, we know that property's going to probably come through as _draft, it's not _lowercase draft, and we know that we need the D to be capitalized, so if we add that title, we know that it's going to capitalize the D, so this will turn into updated draft, just like we want. Okay, so now that we have that, we can basically take our mount hook code from before, so this
into updated draft, just like we want. Okay, so now that we have that, we can basically take our mount hook code from before, so this method exists bit here, let's take that, and we'll paste it in, method exists, component mount, but instead of checking for mount, we're now checking for updated hook, and then we're going to call it. We'll say updated hook, okay, and now with any luck, let's try it. As we type in, there we go, it automatically capitalizes anything we type in, which means it works. So there you go, there's lifecycle hooks, they're very straightforward, hopefully that was a reprieve for you in this series, because it's just a little bit of PHP, but I figured
So there you go, there's lifecycle hooks, they're very straightforward, hopefully that was a reprieve for you in this series, because it's just a little bit of php, but I figured I'd show you because you need lifecycle hooks in a proper Livewire implementation, and yeah, they're really easy to implement, and this is actually how they are implemented in Livewire, so nothing crazy there, see you in the next video.
