I would still install debugbar to check. You might not have DB queries in your component methods, but it could still be querying to rehydrate the Livewire component
How can I reduce the amount of requests (dispatches) going from livewire?
My problem is a little deeper than what I've asked in table but solving that will also solve my problem I guess.
Below is the gif of my app and the problem page. It's an in-restaurant order taking app used by waiters.

I first installed this app on my client's shared hosting, it ran well for a couple of weeks but then it started to get so slow that my client complained to me that it's unusable. Then I bought a VPS and installed the app on it, again a couple of weeks went by and the app started running much slower than how it was the first time I've installed it.
As you can see from the gif, clicking on a category name makes 3 livewire requests.
- To the
TableCategoriescomponent, settingselectedCategoryto the clicked category's id. - From
TableCategories.php, dispatchesgetProductsto the products component and sends selected category id there to show its products on the screen. - Again from
TableCategories.php, dispatchesgetOptionsto the options component to show necessary product options on the right side.
Currently it takes about half a second to 1.5 seconds per request made when a category button is clicked. And it adds up to somewhere between 1.5 to 4.5 seconds per button click. However it used to do all these actions in less than 300ms (all 3 requests combined) only 2 weeks ago. The same problem also happened on client's shared hosting as well, it ran well for a couple of weeks and then started to take up to 25 seconds per button click.
I know that the most logical explanation for this is that my client is inflating the database, therefore making things slower "over time". But the whole database is 400kb in size, with users table and everything included. And the best part is; this action and these requests don't even make a single database call. All the product and option data are cached in the memory, using memcached. So I have no idea how can an action take less than 100ms when it's first installed and then go up to 5s after a couple of weeks.
If you have any suggestion on either reducing the amount of requests the app is dispatching, or any other way to optimize this, it's very much appreciated.
The code trail that runs when a category is selected :
TableCategories.php
class TableCategories extends Component
{
public $categories;
public $selectedCategory;
public function render()
{
return view('livewire.table-categories', ['selectedCategory' => $this->selectedCategory]);
}
public function selectCategory($category_id)
{
$this->dispatch('getOptions', []);
$this->selectedCategory = $this->selectedCategory && $this->selectedCategory['id'] == $category_id ? [] : $this->categories[$category_id];
$this->dispatch('getProducts', $this->selectedCategory['id'] ?? 0);
}
}
TableOptions.php
class TableOptions extends Component
{
protected $listeners = ['getOptions'];
public $tableId;
public $options = [];
public $product;
public $fields = [];
public $quantity = 1;
public function render()
{
return view('livewire.table-options',
[
'options' => $this->options,
]);
}
public function mount($tableId)
{
$this->tableId = $tableId;
}
public function getOptions($product)
{
$this->options = ! empty($product) ? getCategoryFields($product['category_id']) : [];
$this->product = $product;
}
public function resetOptions()
{
$this->quantity = 1;
$this->options = [];
}
public function addToCart()
{
if (! isset($this->quantity) || $this->quantity == 0 || $this->quantity == '') {
$this->quantity = 1;
}
$orderTable = Order::whereSeatingTableId($this->tableId)
->whereNot('order_status', 'completed')->first();
if (! $orderTable) {
$orderTable = Order::create([
'seating_table_id' => $this->tableId,
'order_status' => 'waiting',
]);
}
$orderTable->details()->create([
'product_id' => $this->product['id'],
'options' => json_encode($this->fields),
'quantity' => $this->quantity,
'price' => $this->product['price'] * $this->quantity,
]);
$this->product = '';
$this->resetOptions();
$this->dispatch('refreshCart');
$this->dispatch('deselectProduct');
}
}
TableProducts.php
class TableProducts extends Component
{
protected $listeners = ['getProducts', 'deselectProduct'];
public $products_all;
public $products = [];
public $selectedProduct;
public function render()
{
return view('livewire.table-products',
['products' => $this->products, 'selectedProduct' => $this->selectedProduct]);
}
public function getProducts($category)
{
$this->selectedProduct = [];
$this->products = $category > 0 ? $this->products_all[$category] : [];
}
public function deselectProduct()
{
$this->selectedProduct = [];
}
public function selectProduct($product)
{
$this->selectedProduct = $this->selectedProduct && $this->selectedProduct['id'] == $product ? [] : $this->products[$product];
$this->dispatch('getOptions', $this->selectedProduct);
}
}
Please or to participate in this conversation.