When to use Livewire

#1

Hey all,

I’ve been playing around a bit with Livewire and am just curious what other people’s approach is to using it. So, when do you reach for a Livewire component and when do you reach for other solutions (i.e. plain form submission, frontend framework, etc)?

A rule that I have for myself is that if I’m just showing/hiding something like a modal or form, I will reach for AlpineJS since it is going to be snappier. Also, Livewire seems perfect for things that Caleb has demoed it with, building user/post/repo searches.

The thing I get hung up the most on is, when do plain form submissions make more sense. I started playing around with creating an “Edit Profile” component that would allow you to update things like your name, phone number, etc. The further I got with making it the more I started to think that a plain form submission would be best because I would run into weird issues where the value in the rendered view would be out of sync with the value stored in the component on the backend. If I typed too fast and hit the submit button too quickly I would run into race conditions (I did fix this by adjusting debounce and using the wire:loading attribute).

Does anyone with more experience with the framework have any guidelines or best practices when determining what should be a component and how it should be implemented?

1 Like
#2

I like it for forms minus two conditions. Mainly any kind of file upload cant be done yet to my knowledge without some creative workarounds. I use wire:model.lazy on every input that doesn’t have a keydown event on it, so pretty much anything that isn’t a search. The bug of the method that’s triggered on keydown running first before hydrating the property you tie with wire:model unfortunately still hasn’t been addressed. That might contribute to your race conditions if you are trying to use it that way.

1 Like
#3

Thanks for the tip on using wire:model.lazy, I’m going to try that out!

#4

Another thing that I find myself going back and forth on is whether to use regular Blade views with a controller, or the Route::livewire() method. I like the idea of going all in with Livewire, but am not sure yet. The main thing holding me back is route caching. When using Route::livewire() it seems that it utilizes closures so caching routes is not possible.

What opinions do you all have regarding this?

#5

I’m using it for quite a few forms now. As long as I don’t update the field that the user is currently typing in the real-time updating seemed to work fine for me. (When I try to sanitize the field they type in on the fly, characters will disappear.)

That said, lazy updates are sufficient in most cases and save me some traffic to the server, so I do use that on most forms.

The only form that I haven’t been able to tackle nicely is the Login form: Login form and auto-filling password managers

I don’t use Route::livewire for the same reason: no caching. Using a separate controller does feel a bit redundant. I may end up refactoring to a single LivewireController for all of the components.

How to speed up requests