Livewire ломается не в компонентах, а в их границах — проверьте эти 5 мест

Livewire ломается не в компонентах, а в их границах — проверьте эти 5 мест

В Livewire чаще всего стреляют не шаблоны, а стык состояния, запросов и JS. Если интерфейс ведёт себя «магически», ищите проблему в одном из пяти мест:

— публичные свойства компонента слишком жирные: туда складывают коллекции, модели и временные данные вместо простых скаляров;
— ключи в списках нестабильны, поэтому DOM переиспользуется не там, где вы ждёте;
— действия компонента триггерят лишние запросы, а валидация и загрузка данных смешаны в одном методе;
— сторонний JavaScript меняет DOM напрямую и ломает синхронизацию с серверным состоянием;
— валидация и форматирование завязаны на render(), из-за чего любой чих пересобирает интерфейс.

Полезное правило: публичное свойство — только то, что реально нужно для рендера и формы. Всё тяжёлое держите в сервисах, локальных переменных или computed-подходе, а для списков используйте стабильный идентификатор, а не индекс. 🧩

Ещё один частый промах — пытаться лечить симптомы обновлением всего компонента. Если проблема исчезает после полного перерендеринга, значит у вас конфликт между состоянием и клиентским DOM, а не «глюк Livewire».

Сначала уменьшите поверхность компонента, потом ищите конфликт. В Livewire почти всегда выигрывает не самый умный код, а самый предсказуемый.