This repository is a curated list of general recommendations on how to use Laravel Livewire framework to meet enterprise concerns regarding security, performance, and maintenance of Livewire components.
Livewire requires a root element (div) to be present in each component. Simply put, you should always write code inside
<div>Your Code Here</div>. Omitting this structure will lead to a lot of problems with updating components.
Don't pass large objects to Livewire components!
Avoid passing objects to the component's public properties if possible. Use primitive types: strings, integers, arrays, etc. That's because Livewire serializes/deserializes your component's payload with each request to the server to share the state between the frontend & backend. If you need to work on objects, you can create them inside a method or computed property, and then return the result of the processing.
What to consider a large object?
Note: if you use full-page components, it's recommended to fetch objects in the full-page component itself, and then pass them downstairs to the nested ones as primitive types.
If you had a Livewire component (0) that includes another Livewire component (1), then you shouldn't nest it deeper (2+). Too much nesting can make a headache when dealing with DOM diffing issues.
Also, prefer the usage of Blade components when you use nesting, they will be able to communicate with the parent's Livewire component but won't have the overhead the Livewire adds.
Pass only an ID or UUID to the
mount method, then map the model attributes to component properties. Remember: don't assign a whole model, but its attributes only. To avoid manually mapping model attributes, you can use
fill method, or Loop Functions package.
live wire:model modifier. This dramatically reduces unnecessary requests to the server.
In Livewire version 3, all the models are deferred by default (old:
defer modifier), which is good.
Avoid situations that may lead to passing sensitive data to the Livewire components, because it can be easily accessed from the client-side by default. You can hide the properties from the frontend using
#[Locked] attribute starting from Livewire version 3.
You can use computed properties to avoid unnecessary database queries. Computed properties are cached within the component's lifecycle and do not perform additional SQL queries on multiple calls in the component class or in the blade view.
Livewire has built-in Artisan commands to create, move, rename components, etc. For example, instead of manually renaming files, which could be error-prone, you can use the following command:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component
You can use loading states to make UX better. It will indicate to the user that something is happening in the background if your process is running longer than expected. To avoid flickering, you can use the
Instead of blocking the page render until your data is ready, you can create a placeholder using the lazy loading technique so your UI will feel more responsive.
You can sync your data with the backend using @entangle directive. This way the model will be updated instantly on the frontend, and the data would persist server-side after the network request reach the server. It dramatically improves the user experience on slow devices.
Livewire doesn't support Form Requests internally, but instead of hardcoding the array of validation rules in the component, you may get it directly from Form Request. This way you can reuse the same validation rules in different application layers, for example in API endpoints.
Even simple tests can help you a lot when you change something in the component. Livewire has a very simple yet powerful testing API.
Are you working with Livewire on a daily basis? PRs are welcome.
Suggest your best practices if you don't see them on the list.
If you aren't sure if it's a good practice, you can start a discussion.