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.
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
//);
}
Please or to participate in this conversation.