Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MartinTh's avatar

Broadcasting and livewire hydration issues

Hi,

we are using livewire for a large project and we need real time updates of a data table. However once we learned that livewire puts everything in the snapshot with a roundtrip json payload of roughly 100kb we had to find a way to reduce that. wire:ignore is broken right now as it doesn't let you remove html from the json payload at all. So I found a way of working around this. The table is a livewire component but every property is protected and I don't need any persistence for these at all. Now we switched to reverb for broadcasting and it works... but livewire still triggers the hydration rountrips. Why would I broadcast data changes vom livewire3 backend to frontend when livewire nevertheless always triggers a roundtrip anyway... I am fully lost on livewire.

Can someone please tell me how to tell livewire to not do any json roundtrips. I tried skipRender and Renderless... But it simply won't prevent them at all.

#[On('l-event-newpositioncreated')] public function TriggerActualizingByExternal() {

    // Retrieve previous data from the cache
    $previousData = Cache::get('cachedPositionsTable', []); // Use default empty array if not set

    // Get new data
    $this->positionsTableData = $this->GetTableDataAsJSON();
    

    // Wende zufällige Änderungen auf die neuen Daten an
    $this->applyRandomChanges($this->positionsTableData);

    //transform newData+ColumnIndexMap into final table map compatible data as array of arrays
    $this->transformPositionsData();

    // Check if cache is empty, meaning no previous data
    if (empty($previousData)) {
        // If no previous data, treat all rows as new and send everything to frontend
        $this->positionsTableUpdate = [];
        foreach ($this->positionsTableDataNeu as $item) {
            $this->positionsTableUpdate[] = [
                'key' => $item[0], // PositionID
                'newRow' => $item[1] // Entire row data
            ];
        }
    } else {
        // Identify changed values
        $this->identifyChangedValues($previousData);
    }
    
    
    // Save new data to cache for the next comparison
    $minutes = 7 * 24 * 60; // 7 Tage in Minuten
    Cache::put('cachedPositionsTable', $this->positionsTableDataNeu, $minutes);
   

    // Prepare data for broadcasting
    $data = [
        'teamsUpdate' => $this->positionsTableUpdate
    ];

    // Dispatch broadcast event with updated data
    UIUpdateEvent::dispatch($data);
    
    // Dispatch event with updated data
   // $this->dispatch('la-event-tableupdate',
   //     teamsUpdate: $this->positionsTableUpdate
    //);
  
    
}
0 likes
1 reply
Snapey's avatar

Dont use public properties for all table data. create the table in the render method as you would a regular blade. Then use reverb to tell the component it needs to re-render.

Please or to participate in this conversation.