Що таке острівці (@island) у Livewire 4 і коли вони кращі за дочірній компонент?

Острівець - частина шаблону компонента, що оновлюється ізольовано: дія всередині острівця перерендерює лише його, а не весь компонент.

<div>
    <h1>Дашборд</h1>

    @island
        <div>
            Дохід: {{ $this->revenue }}
            <button type="button" wire:click="$refresh">Оновити</button>
        </div>
    @endisland

    <livewire:recent-orders />
</div>

Клік «Оновити» перерахує й перемалює лише блок доходу. Оскільки revenue - обчислювана властивість, дорогий запит виконується тільки при рендері острівця.

Можливості:

• ліниве завантаження частини компонента: @island(lazy: true) чи @island(defer: true) з @placeholder усередині;
• іменовані острівці і виклик з будь-якого місця компонента:

@island(name: 'stats') ... @endisland
<button wire:click="$refresh" wire:island="stats">Оновити статистику</button>

• дописування замість заміни - для «Завантажити ще» й нескінченної стрічки: wire:island.append="feed" чи .prepend;
• always: true - острівець оновлюється разом з кожним рендером компонента;
• skip: true - не рендерити, доки не викличуть явно.

Важлива поведінка за замовчуванням: коли рендериться весь компонент, острівці пропускаються. Змінили фільтр поза острівцем - острівець, що від нього залежить, сам не оновиться (потрібен always: true або явний виклик за назвою).

Чим краще за дочірній компонент:

• немає окремого файлу, стану, параметрів і подій для синхронізації - острівець бачить властивості й методи компонента;
• не потрібен #[Reactive] для передачі змін.

Коли все ж дочірній компонент:

• повторне використання в кількох місцях;
• власні хуки життєвого циклу, власна авторизація в mount();
• складний ізольований стан.

Обмеження:

• острівці не можна ставити в @foreach, @if та інші керуючі конструкції - вони не мають доступу до змінних циклу чи умови;
• запити острівців ідуть паралельно і змінюють той самий стан компонента: якщо кілька запитів у польоті одночасно, «перемагає» відповідь, що прийшла останньою. Дії, що змінюють спільні властивості, варто тримати поза паралельними острівцями.

Докладніше в документації: Острівці