DOM diffing not working in huge Livewire component, how to debug DOM diffing?


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 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>

{{-- 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.

I see nobody has ever encountered anything like this. I am going to refactor the whole thing later then in multiple components and see if it helps.