Hi,
I have one huge Livewire Component that does no DOM diffing but instead it loads the full component again and again on every update.
Maybe you cannot nest wire:key in your views? (I ended up with that many keys because I saw the DOM diffing did not work for my products list)
I have a Livewire view like this now (simplified):
{{-- livewire component view start --}}
<div wire:key="search-wrapper">
<div wire:key="search-input">...</div>
<div wire:key="search-results">...</div>
</div>
<div wire:key="menu-items">...</div>
<div wire:key="product-list">
<div wire:key="product-{{ $product->uuid }}">
...
{{-- livewire component for price calculation --}}
<livewire:product-price-calculator :product="$product">...</div>
</div>
</div>
{{-- livewire component view end --}}
Each time, even if I only change the search term in the search input, the whole Livewire component view gets downloaded again. I can see that because it is the same size as the initial page load (quite big > 300kB).
But now I am wondering how I can debug these DOM diffing issues? I have commented out each root div, but that gives no difference - still no DOM diffing.
PS: also posted on Livewire Github Discussion a week ago, but there are no people looking I guess.