3 patrones de Livewire que uso en todos mis proyectos

Llevo tiempo trabajando con Livewire en proyectos Laravel y hay ciertos patrones que repito en casi todos los proyectos. Los comparto aquí porque son sencillos pero hacen una diferencia real.

📋

Los tres patrones que voy a mostrar requieren Livewire 3. Si usas Livewire 2, la sintaxis de atributos PHP (#[...]) no está disponible.

1. Confirmación antes de eliminar con `#[Confirm]`

Livewire 3 trajo el atributo #[Confirm] para mostrar un diálogo de confirmación nativo antes de ejecutar una acción.

use Livewire\Attributes\Confirm;

#[Confirm('¿Estás seguro de que quieres eliminar este elemento?')]
public function delete(int $id): void
{
    Model::destroy($id);
}

Sin JavaScript extra, sin modales complejos. El navegador muestra el confirm() nativo y solo continúa si el usuario acepta.

💡

Pro tip: Puedes personalizar el mensaje de confirmación dinámicamente usando interpolación de PHP en el atributo, por ejemplo incluyendo el nombre del elemento que se va a eliminar.

2. URL como fuente de verdad con `#[Url]`

Cuando tienes filtros o búsquedas, sincronizar el estado con la URL hace la experiencia mucho mejor: el usuario puede compartir el enlace con los filtros aplicados, y el botón de atrás funciona como se espera.

use Livewire\Attributes\Url;

#[Url]
public string $search = '';

#[Url]
public string $status = 'active';

⚠️

Cuidado con datos sensibles: No uses #[Url] en propiedades que contengan IDs internos o información que no quieres exponer en la URL del navegador.

3. Lazy loading de componentes pesados

Si tienes un componente que hace queries costosas o carga mucha data, lazy evita que bloquee el render inicial de la página.

<livewire:estadisticas-dashboard lazy />

El componente se renderiza en una segunda petición, después de que la página ya cargó. Para el usuario, la página aparece más rápido aunque la data tarde en llegar.

💡

Pro tip: Puedes definir un placeholder mientras carga usando el método placeholder() en el componente, para mostrar un skeleton en lugar de un espacio en blanco.

🧠 Resumen

→ #[Confirm] — confirmación nativa sin JS ni modales
→ #[Url] — filtros persistentes en la URL, gratis
→ lazy — páginas más rápidas sin refactoring

1. Confirmación antes de eliminar con #[Confirm]

2. URL como fuente de verdad con #[Url]

3. Lazy loading de componentes pesados

1. Confirmación antes de eliminar con `#[Confirm]`

2. URL como fuente de verdad con `#[Url]`