Skip to content

Unidad 5.23 - Livewire: Ciclo de Vida del Componente

5.23.1 Introducción

Hasta ahora hemos aprendido a crear componentes Livewire, vincular propiedades y comunicarlos entre sí. Sin embargo, cada vez que interactuamos con un componente (por ejemplo, al pulsar un botón), Livewire lleva a cabo una serie de acciones en segundo plano: monta el componente, hidrata las propiedades, actualiza valores, renderiza vistas y finalmente deshidrata el estado para enviarlo al navegador. Todo esto conforma lo que se conoce como el ciclo de vida de un componente Livewire.

Livewire nos permite intervenir en cada una de estas fases mediante métodos especiales llamados hooks del ciclo de vida. Entender estos hooks es fundamental para tener mayor control sobre lo que ocurre "detrás del telón" y para depurar o extender el comportamiento de nuestros componentes.

En esta unidad exploraremos de forma guiada y visual estos hooks mediante un componente simple de contador interactivo, que irá mostrando por pantalla un registro (log) de cada hook que se ejecuta y cuándo lo hace.

5.23.2 Proyecto Base: Contador Interactivo con Log de Hooks

Vamos a reutilizar el componente Contador creado en la unidad anterior, pero lo modificaremos para registrar en pantalla todos los hooks del ciclo de vida que se van ejecutando.

🎯 Objetivos del ejemplo:

  • Mostrar en pantalla cuándo se ejecuta cada hook.
  • Relacionar los hooks con acciones concretas del usuario (clics, renderizados, cambios de propiedad...).
  • Familiarizarnos con el flujo completo del ciclo de vida.

📦 Estructura del componente

Tendremos:

  • Una propiedad $contador para contar los clics.
  • Una propiedad $log (array de strings) donde iremos añadiendo los eventos que ocurren.
  • Métodos incrementar() y resetear() para modificar el contador.

Adicionalmente, añadiremos los hooks de ciclo de vida para registrar mensajes en el log.

5.23.3 Implementación del componente Livewire

1️⃣ Crear el componente

php artisan make:livewire ContadorHooks

Esto creará dos archivos:

  • app/Http/Livewire/ContadorHooks.php
  • resources/views/livewire/contador-hooks.blade.php

2️⃣ Código del componente (ContadorHooks.php)

namespace App\Http\Livewire;

use Livewire\Component;

class ContadorHooks extends Component
{
    public $contador = 0;
    public $log = [];

    public function boot()
    {
        $this->log[] = '🔧 boot() ejecutado';
    }

    public function mount()
    {
        $this->log[] = '📦 mount() ejecutado';
    }

    public function hydrate()
    {
        $this->log[] = '💧 hydrate() ejecutado';
    }

    public function rendering()
    {
        $this->log[] = '🖌 rendering() ejecutado';
    }

    public function rendered()
    {
        $this->log[] = '✅ rendered() ejecutado';
    }

    public function dehydrate()
    {
        $this->log[] = '🔥 dehydrate() ejecutado';
    }

    public function updating($name, $value)
    {
        $this->log[] = "⏳ updating() ejecutado para \$name con valor: \$value";
    }

    public function updated($name, $value)
    {
        $this->log[] = "✔️ updated() ejecutado para \$name con valor: \$value";
    }

    public function incrementar()
    {
        $this->contador++;
    }

    public function resetear()
    {
        $this->contador = 0;
    }

    public function lanzarExcepcion()
    {
        throw new \Exception("💥 Excepción lanzada manualmente");
    }

    public function exception($e, $stopPropagation)
    {
        $this->log[] = '❗ exception() ejecutado: ' . $e->getMessage();
    }

    public function render()
    {
        return view('livewire.contador-hooks');
    }
}

3️⃣ Vista del componente (contador-hooks.blade.php)

<div style="font-family: monospace; padding: 1rem;">
    <h2>Contador: {{ $contador }}</h2>

    <button wire:click="incrementar">➕ Incrementar</button>
    <button wire:click="resetear">🔄 Resetear</button>
    <button wire:click="lanzarExcepcion">💥 Lanzar Excepción</button>

    <h3>Log de hooks:</h3>
    <ul>
        @foreach(array_reverse($log) as $entrada)
            <li>{{ $entrada }}</li>
        @endforeach
    </ul>
</div>

4️⃣ Mostrar el componente en una ruta

En routes/web.php, añade:

use App\Http\Livewire\ContadorHooks;

Route::get('/contador-hooks', ContadorHooks::class);

5️⃣ Resultado esperado

Al acceder a /contador-hooks, verás:

  • El número del contador.
  • Botones para incrementarlo, resetearlo o lanzar una excepción.
  • Un listado de mensajes de log mostrando en tiempo real cuándo se ejecuta cada hook.

Cada acción actualizará el componente y añadirá nuevas entradas al log.

5.23.4 Exploración de Hooks: ¿cuándo y cómo se ejecutan?

A continuación vamos a realizar acciones concretas para ver cuándo se ejecuta cada hook. Estos ejemplos están pensados para reproducirse directamente en el componente ContadorHooks.

🔄 Carga inicial del componente

Cuando accedemos por primera vez a la ruta /contador-hooks, veremos en el log algo similar a:

🔧 boot() ejecutado
📦 mount() ejecutado
🖌 rendering() ejecutado
✅ rendered() ejecutado
🔥 dehydrate() ejecutado

✅ Esto ocurre porque el componente se inicializa completamente, y por tanto se ejecutan todos los hooks de arranque.

➕ Incrementar el contador

Al pulsar el botón “Incrementar”, se actualizará la propiedad $contador. El log mostrará:

💧 hydrate() ejecutado
⏳ updating() ejecutado para contador con valor: 1
✔️ updated() ejecutado para contador con valor: 1
🖌 rendering() ejecutado
✅ rendered() ejecutado
🔥 dehydrate() ejecutado

✅ Aquí observamos cómo Livewire hidrata el estado, detecta el cambio en la propiedad, ejecuta los hooks relacionados y finalmente vuelve a renderizar y deshidratar.

🔄 Resetear el contador

Al hacer clic en “Resetear”, el contador vuelve a 0. El log será similar:

💧 hydrate() ejecutado
⏳ updating() ejecutado para contador con valor: 0
✔️ updated() ejecutado para contador con valor: 0
🖌 rendering() ejecutado
✅ rendered() ejecutado
🔥 dehydrate() ejecutado

✅ De nuevo vemos la secuencia completa: hydrate → updating → updated → rendering → rendered → dehydrate.

💥 Lanzar una excepción

Al pulsar “Lanzar excepción”, provocamos manualmente un error. El log mostrará:

💧 hydrate() ejecutado
❗ exception() ejecutado: 💥 Excepción lanzada manualmente
🔥 dehydrate() ejecutado

✅ En este caso no se actualiza ninguna propiedad ni se renderiza vista nueva, porque la ejecución se detiene por el error. Aun así, se ejecutan hydrate, exception y dehydrate.

Resumen de comportamiento

Acción Hooks que se ejecutan
Carga inicial boot, mount, rendering, render, rendered, dehydrate
Clic “Incrementar” hydrate, updating, updated, rendering, render, rendered, dehydrate
Clic “Resetear” Igual que “Incrementar” (cambia el valor a 0)
Excepción manual hydrate, exception, dehydrate

Con este análisis, los alumnos podrán visualizar claramente qué ocurre en cada paso y entender el funcionamiento interno de Livewire.

5.23.5 Resumen Visual y Ejercicio Guiado

🧭 Diagrama del Ciclo de Vida

El ciclo de vida de un componente Livewire puede representarse con la siguiente secuencia:

flowchart TD
    boot["boot()"]
    mount["mount()"]
    hydrate["hydrate()"]
    updating["updating()"]
    updated["updated()"]
    rendering["rendering()"]
    render["render()"]
    rendered["rendered()"]
    dehydrate["dehydrate()"]
    exception["exception()"]

    boot --> mount
    mount --> hydrate
    hydrate --> updating
    updating --> updated
    updated --> rendering
    rendering --> render
    render --> rendered
    rendered --> dehydrate
    updating -->|si error| exception
    hydrate -->|si error| exception
    render -->|si error| exception
  • Si ocurre una excepción en cualquier punto: → exception()

Este flujo se repite con cada interacción que implique cambios de estado (como modificar una propiedad).

📝 Ejercicio Guiado: Segundo Contador con Log Separado

Vamos a reforzar lo aprendido creando un segundo contador independiente dentro del mismo componente.

Objetivo:

  • Ver cómo Livewire maneja múltiples propiedades reactivas.
  • Confirmar que updating y updated se ejecutan por cada propiedad de forma separada.

1️⃣ Modificar el componente:

Agrega la propiedad y métodos para contador2:

public $contador2 = 0;

public function incrementar2()
{
    $this->contador2++;
}

2️⃣ Añadir botones y log en la vista:

<h2>Contador 2: {{ $contador2 }}</h2>
<button wire:click="incrementar2">➕ Incrementar Contador 2</button>

3️⃣ Prueba:

Haz clic en los botones de ambos contadores y observa el log. Deberías ver mensajes como:

⏳ updating() ejecutado para contador2 con valor: 1
✔️ updated() ejecutado para contador2 con valor: 1

✅ Esto demuestra que Livewire puede manejar múltiples propiedades y que los hooks responden de forma individual a cada una.

Con esto cerramos el estudio del ciclo de vida de un componente en Livewire. En la siguiente unidad aplicaremos estos conocimientos en un formulario validado dinámicamente, aprovechando los hooks para mejorar la experiencia del usuario.