Hi everyone, I’m new to LiveWire and need help with a problem. The problem is that it takes about 10 seconds to update the LiveWire component. In the php class I am going to do several calculations and assign about twenty variables. Do you have any solution to reduce the component update time?
Component take too long to refresh
Php:
public function updateSummary($currentDriver, $sessionRemaining, $currentLap, $fuelInTot, $currentFuel, $currentStint, $currentDriveT){
if($currentDriver != '' && $sessionRemaining != '' && $fuelInTot != '' && $currentFuel != '' && $currentStint != '' && $currentDriveT != ''){
$this->driverNow = $currentDriver;
//session remaining
$this->sessionRemaining = DateTime::createFromFormat('d-m-Y H:i:s.u', '01-01-1970 ' . $sessionRemaining . '00') == false ? 'Session over' : substr($sessionRemaining,0,-2);
$estimatedFuel = 0;
$estimatedTime = '00:01:00.000';
$stint_max = 0;
$driveT_max = 0;
foreach ($this->drivers as $driver){
if($currentDriver == substr($driver->user->name ?? '',0,1) . '.' . ($driver->user->surname ?? '')){
$referenceTime = DB::table('pilots')->select(DB::raw('CONCAT(reference_time) as "reference_time"'))->where('id',$driver->id)->first();
$estimatedTime = substr($referenceTime->reference_time,0, -3);
$estimatedFuel = $driver->fuel_consummation;
$stint_max = $driver->stint_max;
$driveT_max = $driver->driving_time_max;
}
}
$tsTimeEstimate = $this->stringToTimestamp($estimatedTime, 'driveTime');
$tsSessionRemaining = $this->stringToTimestamp($sessionRemaining, 'driveTime');
$this->lapsRemaining = intval($tsSessionRemaining / $tsTimeEstimate);
$this->fuelNec = ($this->lapsRemaining + $currentLap) * $estimatedFuel - $fuelInTot;
$this->fuelTime = round(($this->fuelNec / $this->midFlow) + $this->delay, 2);
$this->pitNec = round($this->fuelNec / $this->tankCapacityKg, 1);
//fuel remaining
$this->fuelRemaining = number_format(floatval($currentFuel),2);
$this->lapsRemainingFuel = intval(floatval($this->fuelRemaining) / $estimatedFuel);
//stint remaining
$tsMaxStint = $stint_max * 60;
$tsCurrentStint = $this->stringToTimestamp($currentStint, 'driveTime');
$this->stintRemaining = substr($this->timestampToString($tsMaxStint - $tsCurrentStint - 3600), 0, -2);
$this->lapsRemainingStint = intval(($tsMaxStint - $tsCurrentStint) / $tsTimeEstimate);
$this->fuelNecStint = $this->lapsRemainingStint * $estimatedFuel;
$this->fuelTimeStint = round(($this->fuelNecStint / $this->midFlow) + $this->delay, 2);
//driving time remaining
$tsMaxDriveT = $driveT_max * 60;
$tsCurrentDriveT = $this->stringToTimestamp($currentDriveT, 'driveTime');
$this->driveRemaining = substr($this->timestampToString($tsMaxDriveT - $tsCurrentDriveT - 3600), 0, -2);
$this->lapsRemainingDrive = intval(($tsMaxDriveT - $tsCurrentDriveT) / $tsTimeEstimate);
}
}
View :
<div class="w-layout-grid grid-98">
<div class="text-block-11 grigio grassetto">DRIVING NOW</div>
<div class="text-block-11 grassetto">{{$driverNow ?? '-'}}</div>
</div>
<div class="w-layout-grid grid-29">
<div class="w-layout-grid grid-99">
<div class="text-block-11 grigio grassetto">SESSION REMAINING</div>
<div class="text-block-11 grassetto">{{$sessionRemaining}}</div>
<div class="text-block-11 grigio grassetto">EQ. LAPS</div>
<div class="text-block-11 grassetto">{{$lapsRemaining}}</div>
<div class="text-block-11 grigio grassetto">FUEL NEC. [KG]</div>
<div class="text-block-11 grassetto">{{$fuelNec}}</div>
<div class="text-block-11 grigio grassetto">FUEL TIME [s]</div>
<div class="text-block-11 grassetto">{{$fuelTime}}</div>
<div class="text-block-11 grigio grassetto">PIT NEC.</div>
<div class="text-block-11 grassetto">{{$pitNec}}</div>
</div>
<div class="w-layout-grid grid-99">
<div class="text-block-11 grigio grassetto">FUEL REMAINING</div>
<div class="text-block-11 grassetto">{{$fuelRemaining}}</div>
<div class="text-block-11 grigio grassetto">EQ. LAPS REMAINING</div>
<div class="text-block-11 grassetto">{{$lapsRemainingFuel}}</div>
</div>
@if($session->type == 4)
<div class="w-layout-grid grid-99">
<div class="text-block-11 grigio grassetto">STINT REMAINING</div>
<div class="text-block-11 grassetto">{{$stintRemaining}}</div>
<div class="text-block-11 grigio grassetto">EQ. LAPS REMAINING</div>
<div class="text-block-11 grassetto">{{$lapsRemainingStint}}</div>
<div class="text-block-11 grigio grassetto">FUEL NEC. [KG]</div>
<div class="text-block-11 grassetto">{{$fuelNecStint}}</div>
<div class="text-block-11 grigio grassetto">FUEL TIME [s]</div>
<div class="text-block-11 grassetto">{{$fuelTimeStint}}</div>
</div>
<div class="w-layout-grid grid-99">
<div class="text-block-11 grigio grassetto">DRIVING TIME REMAINING</div>
<div class="text-block-11 grassetto">{{$driveRemaining}}</div>
<div class="text-block-11 grigio grassetto">EQ. LAPS</div>
<div class="text-block-11 grassetto">{{$lapsRemainingDrive}}</div>
</div>
@endif
</div>
Javascript, where i call the function :
window.livewire.emit("updateSummary", currentDriver, sessionRemaining, currentLap, fuelInTot, currentFuel, currentStint, currentDriveT);If you’re passing events, the second argument should be an array that encompasses the information you want to send to the backside. There, you’ll have to unpack the event and do with it as you wish. Example:
component.blade.php
<script>
Livewire.emit('updateSummary', {'currentDriver': 'something', 'sessionRemaining': 'something else', ...}
</script>
Component.php
public function updateSummary($event)
{
$this->currentDriver = $event['currentDriver'];
...
}
If you’re trying to pass things that are more complex than a string, bool, array, etc. That’s not going to work. Meaning, you can’t pass javascript objects or php models back and forth over events.
A database query inside a foreach loop is always a red flag - whether in Livewire or anywhere else in your code.
You need to consider how you can optimise this.
I agree with Snapey. I put a cache remember on each of your queries in your livewire components and compare the performance.