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

mhdev's avatar
Level 1

Livewire re-rendering and flash messages

I've got a Livewire component that is quite database-intensive. As part of my component, the user can select a checkbox and press a button that then opens a modal. However within that function I've got various checks to ensure an option is selected, and if it isn't then I show a flash message. However the problem is that if an option is not selected, Livewire is re-rendering the whole page which I want to avoid. But if I add $this->skipRender() then my flash message isn't shown.

Livewire component;

    public function openModal(): void
    {
        if (count($this->options) === 0) {
            // No Options Selected
            session()->flash('error', 'No options selected');
            // This is where I want to avoid re-rendering the entire UI so added `$this->skipRender()` but that causes the flash message to not display, as the flash message is constructed within the blade
            return;
        } else {
            // Open the modal...
        }
    }

Best way to get around this?

0 likes
3 replies
SharipovIskandar's avatar

Hello!

I see you're trying to avoid re-rendering the whole page while still showing a flash message when no options are selected. The issue you're facing is that when you use $this->skipRender(), it prevents the flash message from displaying, as flash messages typically rely on a page re-render.

Here's a solution that should work for you:

Avoid using $this->skipRender() when you want to show the flash message. Instead, use emit() to trigger an event and show the message without re-rendering the whole page.

Use emit() in your component:

You can modify your openModal method like this:

public function openModal(): void { if (count($this->options) === 0) {

    session()->flash('error', 'No options selected');
            
    $this->emit('showErrorFlashMessage');
    
    $this->skipRender();
    return;
} else {
    // Open the modal...
}

}

Handle the flash message on the frontend using JavaScript:

In your Blade template, listen for the event and show the flash message:

<script>
    Livewire.on('showErrorFlashMessage', () => {
        alert('No options selected');
    });
</script>

By doing this, you can prevent the entire page from being re-rendered while still showing the flash message.

Let me know if that works for you or if you need more help!

Merklin's avatar

@SharipovIskandar There is no emit() in Livewire 3. emit(), emitTo(), dispatchBrowserEvent() and so on were replaced with dispatch()

valentin_vranic's avatar

Yes, certainly you'll need to use dispatch() as mentioned above. Here's one of my solution, what I use:

I'm guessing you're using Livewire 3!

Within the component

$this->dispatch(
		'trigger-alert',
		message: $this->message,
		type: {{ any bootstrap type: success, error, info, etc... }},
		setTime: false
);

And the _alert.blade.view which you have to include in your view:

<div x-data="{ alertType: '' }" class="d-flex align-items-center justify-content-center" wire:key="{{Str::random()}}"
     x-cloak>
    <div x-data="{ open: false, message: '', setTime: true}"
         @trigger-alert.window="
         open = true;
         message=$event.detail.message;
         alertType = $event.detail.type ?? 'success';
         setTime = $event.detail.setTime ?? setTime;
         setTimeout(() => { open = !setTime; }, 2000);
         "
         class="alert alert-dismissible fade show" :class="`alert-${alertType}`"
         role="alert"
         x-show="open"
         x-transition.delay.500ms
         x-transition:enter.duration.500ms
         x-transition:leave.duration.400ms
    >
        <div x-html="message"></div>
        <button type="button"
                class="btn btn-sm btn-close p-0 mt-2 me-2"
                x-on:click="open = false"
                aria-label="Close">
        </button>
    </div>
</div>

Hence it was written in bootstrap, and it's handily customizable, but hope you'll get the idea behind and be able to solve your issue.

Please or to participate in this conversation.