Livewire dehydrate method did not dispatched

I tried to utilize the livewire's dehydrate at the end of subsequent request to update the $exporting property from true to false, bit it seems didnt work for me

Livewire class

class Export extends Component

{
    public $selectedGroup = '';
    public $selectedJob = '';
    public $selectedStatus = '';
    public $exporting = false;

    #[On('employee-filtered')]
    public function updateExportParameters($parameters)
    {
        $this->selectedGroup = $parameters['selectedGroup'];
        $this->selectedJob = $parameters['selectedJob'];
        $this->selectedStatus = $parameters['selectedStatus'];
    }

    public function hydrate()
    {
        $this->exporting = true;
    }

    public function export()
    {
        return (new \App\Exports\EmployeeExport([
            'selectedGroup' => $this->selectedGroup,
            'selectedJob' => $this->selectedJob,
            'selectedStatus' => $this->selectedStatus,
        ]))->download('Employee List.xlsx');
    }

    public function dehydrate()
    {
        $this->exporting = false;
    }
    
    public function render()
    {
        return view('livewire.employee.export');
    }
}

How to fix this ?

Update I tried to dd($this) inside the hydrate method, and its returning this info :

App\Livewire\Employee\Export {#477 ▼ // app\Livewire\Employee\Export.php:45
  #__id: "GNeOfZWidoO8I0NAQpRl"
  #__name: "employee.export"
  #listeners: []
  #attributes: Livewire\Features\SupportAttributes\AttributeCollection {#1486 ▶}
  #withValidatorCallback: null
  #rulesFromOutside: []
  #messagesFromOutside: []
  #validationAttributesFromOutside: []
  +search: ""
  +selectedGroup: ""
  +selectedJob: ""
  +selectedStatus: ""
  +startDate: ""
  +endDate: ""
  +exporting: false
}

Turns out it does change the property as intended, however the state on my view apparently wasn't changed

<div>
    <button
        wire:click="export"
        class="btn btn-outline-success me-2">
        <i class="bi bi-file-earmark-excel"></i> {{ $exporting === false ? 'Download' : 'Proses ...' }}
    </button>
</div>

if the value was true it should displaying the "Proses ..." , if not then the "Download" should be displayed, but after the Download process is finished, the text wasn't updated

Solution

So the dehydrate method is called after the render method. During the render method, the view is loaded, the properties added, etc. This means that any change during the dehydrate method will only appear visible in the next request cycle. This means if you disable the hydrate method, in the next request the value will be false again. The hydrate method also only gets called when the request reaches Livewire, which means your "truthy" check will also need to wait until the request has come full circle.

What you can do, since you're using a click handler, is the following:

<div x-data>
    <button x-on:click="document.getElementById('label').textContent = 'Proses';
            wire:click="export"
            class="btn btn-outline-success me-2">
        <i class="bi bi-file-earmark-excel"></i> 
        <span id="label">Download</span>
    </button>
</div>

Using JavaScript (I used Alpine in my example, but a normal JS handler will also work) we can update the label as soon as it's clicked, and when the Livewire request cycle is complete, it will update the content back to how it was (since we're not ignoring it using wire:ignore).