You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.x.
Lifecycle Hooks
Class Hooks
Each Livewire component undergoes a lifecycle. Lifecycle hooks allow you to run code at any part of the component's lifecyle, or before specific properties are updated.
Hooks | Description |
---|---|
boot | Runs on every request, immediately after the component is instantiated, but before any other lifecycle methods are called |
booted | Runs on every request, after the component is mounted or hydrated, but before any update methods are called |
mount | Runs once, immediately after the component is instantiated, but before render() is called. This is only called once on initial page load and never called again, even on component refreshes |
hydrate | Runs on every subsequent request, after the component is hydrated, but before an action is performed, or render() is called |
hydrateFoo | Runs after a property called $foo is hydrated |
dehydrate | Runs on every subsequent request, before the component is dehydrated, but after render() is called |
dehydrateFoo | Runs before a property called $foo is dehydrated |
updating | Runs before any update to the Livewire component's data (Using wire:model , not directly inside PHP) |
updated | Runs after any update to the Livewire component's data (Using wire:model , not directly inside PHP) |
updatingFoo | Runs before a property called $foo is updated. Array properties have an additional $key argument passed to this function to specify changing element inside array, like updatingArray($value, $key) |
updatedFoo | Runs after a property called $foo is updated. Array properties have additional $key argument as above |
updatingFooBar | Runs before updating a nested property bar on the $foo property or a multiword property such as $fooBar or $foo_bar |
updatedFooBar | Runs after updating a nested property bar on the $foo property or a multiword property such as $fooBar or $foo_bar |
Please note that mutating a property directly inside a Livewire component class doesn't trigger any of the updating/updated hooks.
1class HelloWorld extends Component 2{ 3 public $foo; 4 5 public function boot() 6 { 7 // 8 } 9 10 public function booted()11 {12 //13 }14 15 public function mount()16 {17 //18 }19 20 public function hydrateFoo($value)21 {22 //23 }24 25 public function dehydrateFoo($value)26 {27 //28 }29 30 public function hydrate()31 {32 //33 }34 35 public function dehydrate()36 {37 //38 }39 40 public function updating($name, $value)41 {42 //43 }44 45 public function updated($name, $value)46 {47 //48 }49 50 public function updatingFoo($value)51 {52 //53 }54 55 public function updatedFoo($value)56 {57 //58 }59 60 public function updatingFooBar($value)61 {62 //63 }64 65 public function updatedFooBar($value)66 {67 //68 }69}
Javascript Hooks
Livewire gives you the opportunity to execute javascript during certain events.
Hooks | Description |
---|---|
component.initialized | Called when a component has been initialized on the page by Livewire |
element.initialized | Called when Livewire initializes an individual element |
element.updating | Called before Livewire updates an element during its DOM-diffing cycle after a network roundtrip |
element.updated | Called after Livewire updates an element during its DOM-diffing cycle after a network roundtrip |
element.removed | Called after Livewire removes an element during its DOM-diffing cycle |
message.sent | Called when a Livewire update triggers a message sent to the server via AJAX |
message.failed | Called if the message send fails for some reason |
message.received | Called when a message has finished its roudtrip, but before Livewire updates the DOM |
message.processed | Called after Livewire processes all side effects (including DOM-diffing) from a message |
1<script> 2 document.addEventListener("DOMContentLoaded", () => { 3 Livewire.hook('component.initialized', (component) => {}) 4 Livewire.hook('element.initialized', (el, component) => {}) 5 Livewire.hook('element.updating', (fromEl, toEl, component) => {}) 6 Livewire.hook('element.updated', (el, component) => {}) 7 Livewire.hook('element.removed', (el, component) => {}) 8 Livewire.hook('message.sent', (message, component) => {}) 9 Livewire.hook('message.failed', (message, component) => {})10 Livewire.hook('message.received', (message, component) => {})11 Livewire.hook('message.processed', (message, component) => {})12 });13</script>
← Previous Topic
Events
Next Topic →
Nesting Components