You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.x.

Lifecycle Hooks

Be amazing at Livewire
with our in-depth screencasts. Watch Now

Class Hooks

Each Livewire component undergoes a lifecycle (mount, updating, updated). Lifecycle hooks allow you to run code at any part of the component's lifecyle, or before specific properties are updated.

Note: Update hooks are only run when directly updating properties. If you also want to run the hooks when updating a property from an action, just call $this->updatedFoo() manually.

Hooks	Description
mount	Runs once, immediately after the component is instantiated, but before `render()` is called
hydrate	Runs on every request, immediately after the component is hydrated, but before an action is performed, or `render()` is called
updating	Runs before any update to the Livewire component's data
updated	Runs after any update to the Livewire component's data
updatingFoo	Runs before a property called `$foo` is updated
updatedFoo	Runs after a property called `$foo` is updated

         1use Livewire\Component;
 2 
 3class HelloWorld extends Component
 4{
 5    public $foo;
 6 
 7    public function mount()
 8    {
 9        //
10    }
11 
12    public function hydrate()
13    {
14        //
15    }
16 
17    public function updating($name, $value)
18    {
19        //
20    }
21 
22    public function updatingFoo($value)
23    {
24        //
25    }
26 
27    public function updatedFoo($value)
28    {
29        //
30    }
31 
32    public function updated($name, $value)
33    {
34        //
35    }
36}

Javascript Hooks

Livewire gives you the opportunity to execute javascript during certain events.

Hooks	Description
beforeDomUpdate	Runs after Livewire receives a response from the server, but before any DOM diffing/patching takes place
afterDomUpdate	Runs after livewire updates the DOM

         1<script>
 2    document.addEventListener("livewire:load", function(event) {
 3        window.livewire.hook('beforeDomUpdate', () => {
 4            // Add your custom JavaScript here.
 5        });
 6 
 7        window.livewire.hook('afterDomUpdate', () => {
 8            // Add your custom JavaScript here.
 9        });
10    });
11</script>

← Previous Topic Events

Next Topic → Validation