Enhancing Performance with FilamentPHP Repeaters 🚀

🔧 Enhancing Performance with FilamentPHP Repeaters

In FilamentPHP, repeaters are a powerful tool for managing multiple components within a form. When a component is set to ->visible(false), the amount of data received from the server is significantly reduced. This is particularly useful when working with a repeater containing many components.

How I Optimize My Repeaters

To keep my repeaters fast and optimized, I only display what I need and hide the rest. There are several ways to achieve this, but I have opted to use PHP sessions for this purpose.

Additionally, each time a new item is added, it triggers a validation with the currently handled item before transitioning to the new one or an existing one.

Arrow icons are also added to simulate the original repeater.

Example Code for Performance Optimization your Filamentphp Repeaters:

Here’s how you can apply this technique with a small code snippet:

use Filament\Forms;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Select;

Repeater::make('attributes.periods')
            ->extraItemActions([
                Forms\Components\Actions\Action::make('toggle')
                    ->icon(function ($arguments) {
                        if (session('active') === $arguments['item']) {
                            return 'heroicon-o-chevron-down';
                        }

                        return 'heroicon-o-chevron-up';
                    })
                    ->action(function ($arguments, $livewire) use ($form) {
                        $form->getState();
                        session()
                            ->put('active', session('active') !== $arguments['item'] ? $arguments['item'] : null);
                    })
            ])
            ->addAction(function ($action) use ($form) {
                $action
                    ->before(fn () => $form->getState())
                    ->after(fn ($state) => session()->put('active', array_key_last($state)));
            })
            ->itemLabel(function (Repeater $repeater, $state, $uuid) {
                $action = "mountFormComponentAction('". $repeater->getStatePath() ."', 'toggle', {item: '{$uuid}'})";
                return new HtmlString(
                    '<div class="cursor-pointer py-1.5 w-[600px]" wire:click="' . $action . '">'
                    . data_get($state, 'name') .
                    '</div>'
                );
            })
            ->schema(fn ($livewire) => [
                Forms\Components\Group::make()
                    ->visible(fn ($component) => str($component->getStatePath())->contains(
                        session('active')
                    ))
                    ->schema([
          
                    ])
            ]);

In this example, setting the Group layout, and the ->visible() property, helps to reduce the amount of transmitted data, which is particularly useful when dealing with many repeater elements and aims to enhance the overall application performance.

Do you find this information helpful? Do you have any questions or additional suggestions?

Follow me on X!