Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tkezell's avatar

Issue with livewire lifecycle hook

I'm trying to run a bit of code that will resize a div after each time livewire renders the component. Why is my lifecycle hook not being called after render?

    document.addEventListener("DOMContentLoaded", () => {
        alert('DOMContentLoaded');
        Livewire.hook('component.initialized', (component) => {
            alert('Component initialized');
            handleResize();
        });
    });
0 likes
7 replies
LaryAI's avatar
LaryAI
AI
1 year ago
Level 58

To ensure that your code runs after each Livewire component render, you should use the component.rendered hook instead of component.initialized. The component.initialized hook is only called once when the component is first initialized, whereas component.rendered is called every time the component is rendered, including after updates.

Here's how you can modify your code to use the correct lifecycle hook:

document.addEventListener("DOMContentLoaded", () => {
    alert('DOMContentLoaded');
    Livewire.hook('component.rendered', (component) => {
        alert('Component rendered');
        handleResize();
    });
});

This change should ensure that your handleResize() function is called every time the Livewire component is rendered. Make sure that handleResize() is defined and accessible in the scope where you're calling it.

tkezell's avatar

The alert('Component rendered') alert is not appearing after render.

amateen572's avatar

document.addEventListener("DOMContentLoaded", () => { alert('DOMContentLoaded'); Livewire.hook('component.rendered', (component) => { alert('Component rendered'); handleResize(); }); }); component.initialized: Called once when the Livewire component is first initialized. component.rendered: Called every time Livewire finishes rendering the component, including after updates or interactions.

tkezell's avatar

@amateen572 Thanks, however, the alert is still not being fired when the livewire component is rendered calling component.renderd.

valentin_vranic's avatar

@tkezell and what about rendered() lifecycle hook? You could dispatch() an event in it, so it will ensure that the component is ready. Later in you blade inside of

public function rendered(): void
{
    $this->dispatch('eventTriggered');
}

@script
<script>
   Livewire.on('eventTriggered', () => {
      alert('Event triggered');
   })
</script>
@endscript

Please or to participate in this conversation.