En los últimos artículos hemos abordado distintos aspectos del ciclo de vida de los componentes Lit. Hemos aprendido diversos métodos interesantes, pero no hemos hablado mucho de cómo controlar cuándo Lit da una propiedad por cambiada o no.

De manera predeterminada, cada vez que el valor de la propiedad cambia, porque por ejemplo se haya asignado un valor nuevo, Lit ejecuta todo el ciclo de vida relacionado con esa propiedad, que generalmente desencadena en la actualización del template, mostrando el valor del nuevo dato. Este es el comportamiento que hemos experimentado hasta el momento.

Sin embargo, en este artículo vamos a aprender cómo controlar los cambios de las propiedades para definir por nuestra cuenta cuándo Lit debe dar una propiedad por cambiada y cuándo actualizar el template del componente. Para ello usaremos una configuración de las propiedades llamada "hasChanged".

Ciclo de updates reactivo

En la documentación de Lit existe un apartado específico llamado "Reactive update cycle" donde nos explica cómo es el ciclo de vida de las propiedades y cómo pueden o no desencadenarse los cambios en el template.

Allí encontraremos un diagrama explicativo con los estados sobre los que pasa el componente ante el cambio de propiedades. Puedes encontrar allí informaciones detalladas y muy técnicas, pero creo que todo se puede resumir mejor en estos puntos que vienen a expresar el flujo de cambios y estados:

• Se produce un cambio en la propiedad (este puede venir porque se haya cambiado un atributo en la etiqueta Host del componente, porque se esté bindeando un dato que ha cambiado o porque dentro del componente se haya modificado el valor de la propiedad).
• Se ejecuta un método de la propiedad llamado "hasChanged()", el cual tiene como responsabilidad decir si ese cambio debe o no desencadenar la actualización del template.
• Si se da por modificada la propiedad, entonces se ejecuta un método de Lit llamado requestUpdate() que se encarga de asegurarse de ejecutar los procesos para actualizar el template.

El método requestUpdate() lo podemos invocar nosotros mismos y puede tener cierta utilidad como veremos más adelante en otros artículos.

Método hasChanged() de la propiedad

Igual que existen las configuraciones de la propiedad como "type" o "reflect" que hemos estudiado con detalle en otros capítulos del Manual de Lit, podemos encontrar otra configuración llamada "hasChanged", que en este caso se debe alimentar con una función.

La función que asignemos a hasChanged se encargará de decidir programáticamente cuándo el cambio del valor de una propiedad debe desencadenar una actualización del template. De manera predeterminada ese metodo realiza una comprobación estricta del valor y el tipo:

newVal !== oldVal

Si esa expresión da positivo (porque es distinto el valor o el tipo del dato), entonces se desencadena la actualización del template.

Nosotros podemos, a la hora de declarar las propiedades, suministrar un código distinto para hacer la comprobación del cambio y así decidir si una modificación del valor de la propiedad debe producir un cambio en el template.

Para ello simplemente declaramos el método hasChanged y devolvemos un boleano:

• Si devolvemos true, indica que hubo un cambio en la propiedad relevante y que se debe ejecutar la actualización del template.
• Si devuelve false, entonces no se producirá ningún proceso para actualizar la vista del componente.

Ejemplo con hasChanged en una propiedad

Vamos a mostrar un ejemplo de uso del método hasChanged en una propiedad. Para ello modificaremos uno de los componentes creados anteriormente. En este caso vamos a trabajar con el componente dw-counter, que estuvimos desarrollando en el artículo Cambiar propiedades como respuesta a eventos en Lit.

Nuestro objetivo es bien simple, no muy operacional pero suficiente para probar el funcionamiento de hasChanged(). Consiste en verificar el valor de la propiedad "counter".

• Si el valor es múltiplo de 5, entonces se actualizará el template
• Si el valor no es múltiplo de 5, entonces el template no se actualizará.

Para ello vamos a definir la propiedad con este código:

static properties = {
    counter: { 
        type: Number,
        hasChanged(newVal, oldVal) {
            console.log(`Cambió "counter" valor antiguo ${oldVal}, nuevo ${newVal}`);
            return newVal % 5 == 0;
        },
    },
}

• Gracias a la definición del método hasChanged en la configuración de la propiedad, cada vez que cambie el contador se ejecutará el método para verificar si esos cambios se consideran suficientes para actualizar el template.
• En el método hasChanged recibimos el valor antiguo y el nuevo como parámetros
• Si el valor nuevo es múltiplo de 5 devolvemos true
• Si el valor nuevo no es múltiplo de 5 devolvemos false.

Si pones en marcha el componente observarás que ahora solamente actualiza el template en los casos que nosotros hemos definido. Es decir, pulsas varias veces el botón pero solamente se mostrarán valores del contador nuevos cuando éstos son múltiplos de 5. Pero sin embargo, debe quedar claro que la propiedad siempre cambia!! que no se actualice el template no quiere decir que internamente la propiedad no esté cambiando de valor, simplemente hemos decidido que ese cambio no es relevante, al menos no lo suficiente como para desencadenarse una actualización del template.

Gracias al console.log() que hay dentro del método hasChanged() queda patente que sí que se está actualizando la propiedad, solo que no siempre cambia la vista del contador.

Conclusión

Con esto hemos visto la configuración hasChanged de las propiedades de componentes. Ya la habíamos mencionado anteriormente, pero nos quedaba por mostrar su funcionamiento con ejemplos.

La verdad no resulta demasiado frecuente el uso de esta configuración, pero está ahí para cuando la puedas necesitar. No obstante, nos ha dado pie a conocer un poco más algunos aspectos del ciclo de vida de las actualizaciones de los templates de los componentes Lit. Más adelante veremos otros asuntos relacionados con este ciclo.