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();
        });
    });

LaryAI

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

1 year ago

Level 3

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

amateen572

1 year ago

Level 1

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

1 year ago

Level 3

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

valentin_vranic

1 year ago

Level 5

Doesn't this helps you, if you wrap you script inside of @script and @endscript tags inside of you view?

https://livewire.laravel.com/docs/javascript#executing-scripts The parts inside of it will be executed before component is rendered

tkezell

1 year ago

Level 3

@valentin_vranic Thanks for the tip. For some reason that didn't fix my issue.

valentin_vranic

1 year ago

Level 5

@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.