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.

 

HooksDescription
bootRuns on every request, immediately after the component is instantiated, but before any other hooks are called
bootedRuns on every request, after the component is mounted or hydrated, but before any update methods are called
mountRuns 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
hydrateRuns on every subsequent request, after the component is hydrated, but before an action is performed, or render() is called
hydrateFooRuns after a property called $foo is hydrated
dehydrateRuns on every subsequent request, before the component is dehydrated, but after render() is called
dehydrateFooRuns before a property called $foo is dehydrated
updatingRuns before any update to the Wire component's data (Using wire:model, not directly inside PHP)
updatedRuns after any update to the Wire component's data (Using wire:model, not directly inside PHP)
updatingFooRuns 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)
updatedFooRuns after a property called $foo is updated. Array properties have additional $key argument as above
updatingFooBarRuns before updating a nested property bar on the $foo property or a multiword property such as $fooBar or $foo_bar
updatedFooBarRuns 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.initializedComponent has been initialized on the page
element.initializedWhen an individual element is initialized
element.updatingBefore an element is updated during its DOM-diffing cycle after a network roundtrip
element.updatedAfter an element is updated during its DOM-diffing cycle after a network roundtrip
element.removedCalled after Wire removes an element during its DOM-diffing cycle
message.sentCalled when a Wire update triggers a message sent to the server via AJAX
message.failedCalled if the message send fails for some reason
message.receivedCalled when a message has finished its roudtrip, but before Wire updates the DOM
message.processedCalled 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>
********************************** ************************* ************************ **************** ****************** *********** ************** ************* ************ *************