laravel 7 blade components hit queries multiple times

Viewed 252

I am using Laravel 7 blade components for my website so I can increase the reusibility of code at front side.

now I am achieving what I want to achieve but there is something related to optimization which is my concern.

here is my code

it is the component class

    <?php

namespace App\View\Components\Front\Make;

use App\Library\Services\Front\FilterService;
use App\Models\Front\MakeFilter;
use App\Models\Make;
use Illuminate\View\Component;

class MakeUl extends Component
{
    public $makes;
    public $showModels;
    public $limit;
    public $showLogo;
    public $inventoryCount;
    public $defaultLogo;
    public $showInventoryCount;
    private $_FilterService;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($showModels = 1, $limit = -1, $showLogo = 1, $showInventoryCount = 1)
    {
        $this->_FilterService = new FilterService();

        $this->showModels = $showModels;
        $this->showLogo = $showLogo;
        $this->limit = $limit;
        $this->showInventoryCount = 0;
        $this->inventoryCount = 0;
        $this->defaultLogo = url('public/front/images/default/make-default-logo.png');

        $this->makes = $this->_FilterService->getAllMakes($limit);
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.front.make.make-ul');
    }
}

and component markdown

<ul>
    @foreach($makes as $make)
        <li class="dropdown makeSearchBox">
            <a href="car.html">
                @if($showLogo == 1)
                    <img src="{{ ($make->image) ? image_url(MakeImageFolder, $make->image) : $defaultLogo }}"
                         class="img-fluid" alt="audi">
                @endif
                <span>{{ ucwords($make->name) }} @if($showInventoryCount)({{ $inventoryCount }})@endif</span></a>
            @if($showModels == 1)
                <x-front.model.search-by-model>
                    <x-front.model.model-ul :make="$make"/>
                </x-front.model.search-by-model>
            @endif
        </li>
    @endforeach
</ul>

now here comes the main issue suppose if I am using this component 3 times on my page like in header, sidebar and footer. it will hit the DB 3 times to get the make list and then render the component.

my concern is Why hit 3 times? is there any other way to overcome this? or it hits only one time per page dose not matter how many times I am using it.

your solutions and suggestions will be appreciable also please let me know if I am using this in a correct way or not.

1 Answers

Extract your constructor logic to the controller where you are serving the page with same components used multiple times. and pass the variables to the livewire component from there. Have not tried but you could try your self.

Related