Livewire reloads 10k data everytime

Hello guys! I want to apologize first if my english is not perfect since I am french.

So to briefly resume what is happening, I have livewire page for seat reservation like at a cinema. Everything works well, you can select/deselect seats, pay, everything,...

The problem is that we needed to implement something to be able to specify a specific user in a modal via a select tag, for that I need to load all users in the database in the mount function (we have around 10K users) and use it in the blade file. Except it increases all the queries other that are happening by 1.5s approximately. For example clicking on a seat takes 2s instead of ~300ms to change from 'available' to 'reserved' with the color change. I don't know why, since I just load it in the mount function and it is not used nor refreshed elsewhere, if someone could help me it would be much appreciated.

This is the code (I just started Livewire I may be missing important points) :

	public $allMembers;

    public function mount($spectacleid)
    {
		...

        $this->allMembers = User::all();
    }

And in the blade I have this :

                        <select name="user-reservation" id="user-reservation" class="form-control" required wire:ignore>
                            @foreach ($allMembers as $user)
                                <option value="{{ $user->user_id }}">{{ $user->lastname }}
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>

Removing the foreach in the blade doesn't change everything, the times reduces only when i remove this line :

 $this->allMembers = User::all();`

tykus

1 year ago

Best Answer

Level 104

Is it really necessary to load all 10,000 the Users into a select element??? I would consider a select2 search/select approach if I was dealing with this number of options, from a UX perspective if nothing else!

Hydrating 10,000 models likely is part of your issue, and since you don't actually need model instances, I would suggest modifying the query like this:

$this->allMembers = DB::table('users')
  ->selectRaw('user_id, CONCAT(lastname, " ", name) as fullname')
  ->orderBy('fullname')
  ->pluck('fullname', 'user_id')
  ->all();

Then in the view:

@foreach ($allMembers as $userId => $name)
  <option value="{{ $user_id }}">{{ $name }}</option>
@endforeach

1 like

aschnepp

1 year ago

Level 1

@tykus I just tried it and it works perfectly, the query execution time has went from 2s to 375ms thank you. Yea i forgot to add that it is already a select2 input. I just want to ask why is there so much difference in time between what you did and what I had ? Is pluck reducing time this much ?

tykus

1 year ago

Level 104

@aschnepp that is a good result; I expect the orderBy that I added is causing some additional slowness as well. You can mitigate by adding appropriate indexes on the table

You are doing two things to improve the overall time needed (i) selecting only the columns needed, nothing more and (ii) PHP is not hydrating User model instances.

1 like

Please or to participate in this conversation.