Hooks
Whenever a Wire component is included on the page it undergoes a series of hooks which allow us to intervene at any time during the component's lifecycle, or before specific properties are updated.
Hooks | Description |
---|---|
boot | Runs on every request, immediately after the component is instantiated, but before any other hooks 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 Wire component's data (Using wire:model , not directly inside PHP) |
updated | Runs after any update to the Wire 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 |
Note! Modifying a value of a property directly inside a Wire component class doesn't trigger any of the updating/updated hooks.
A hook can be implemented as following:
class FooComponent extends WireComponent {
public string $foo;
public function boot() { }
public function booted() { }
public function mount() { }
public function hydrateFoo($value) { }
public function dehydrateFoo($value) { }
public function hydrate() { }
public function dehydrate() {}
public function updating($name, $value) { }
public function updated($name, $value) { }
public function updatingFoo($value) { }
public function updatedFoo($value) { }
public function updatingFooBar($value) { }
public function updatedFooBar($value) { }
}
Javascript can be executed during certain events.
component.initialized | Component has been initialized on the page |
element.initialized | When an individual element is initialized |
element.updating | Before an element is updated during its DOM-diffing cycle after a network roundtrip |
element.updated | After an element is updated during its DOM-diffing cycle after a network roundtrip |
element.removed | Called after Wire removes an element during its DOM-diffing cycle |
message.sent | Called when a Wire 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 Wire updates the DOM |
message.processed | Called after Wire processes all side effects (including DOM-diffing) from a message |
<script>
document.addEventListener("DOMContentLoaded", () => {
Wire.hook('component.initialized', (component) => {})
Wire.hook('element.initialized', (el, component) => {})
Wire.hook('element.updating', (fromEl, toEl, component) => {})
Wire.hook('element.updated', (el, component) => {})
Wire.hook('element.removed', (el, component) => {})
Wire.hook('message.sent', (message, component) => {})
Wire.hook('message.failed', (message, component) => {})
Wire.hook('message.received', (message, component) => {})
Wire.hook('message.processed', (message, component) => {})
});
</script>