Uso de Create Effects en Solid.js

¿Qué son los effects en Solid.js?

Los effects son una de las primitivas reactivas clave en Solid.js, utilizadas para gestionar efectos secundarios o "side effects" en aplicaciones. Su importancia radica no solo en su uso interno dentro del sistema de Solid, sino también en cómo permiten a los desarrolladores trabajar con cambios de señales (signals) de manera eficiente.

¿Cómo se utilizan los Create Effects?

Para trabajar con los Create Effects, es esencial importarlos desde la biblioteca de Solid.js. Al igual que con las señales, en Solid importamos la primitiva con Create Effect, lo que nos permite definir efectos secundarios que estarán atentos a los cambios en las dependencias.

Ejemplo básico:

import { createEffect } from 'solid-js';

createEffect(() => {
  console.log('CountChanged');
});

Esta función toma otra función como su argumento y se ejecutará cada vez que alguna de sus dependencias internas cambie. Por ejemplo, si estamos observando un signal denominado count, cuando este cambie, el efecto se ejecutará automáticamente.

¿Qué tan inteligentes son los effects de Solid.js?

Los effects en Solid.js son notablemente avanzados. Son capaces de identificar automáticamente las signals que utilizan internamente, y re-ejecutar el effect solo cuando estos signals cambian. No importa cuántas veces se invoque el mismo signal dentro de un effect; éste se ejecutará solo cuando sea necesario.

Ejemplo con múltiples signals:

createEffect(() => {
  console.log('First signal changed');
  console.log('Second signal changed');
});

Este behavior inteligente optimiza el rendimiento al evitar ejecuciones innecesarias del efecto.

¿Se pueden combinar multiple signals dentro de un single effect?

Sí, los effects no se limitan a observar una sola signal. Puedes usar diversas expresiones que involucran múltiples signals. Por ejemplo, podrías tener un segundo signal para otra funcionalidad y observar ambos signals en el mismo efecto.

Ejemplo práctico:

Supongamos que tienes dos signals y deseas actualizar el sessionStorage cada vez que cambien. Puedes hacerlo así:

createEffect(() => {
  sessionStorage.setItem('count', count());
  sessionStorage.setItem('secondCount', secondCount());
});

Este snippet almacena el estado actual de dos signals en el sessionStorage del navegador cada vez que uno de ellos cambia.

Usos avanzados de los effects

Una de las grandes ventajas de los effects en Solid.js es su capacidad para interactuar con APIs externas y almacenar datos pertinentes fuera de la aplicación. Pueden utilizarse para realizar fetch de APIs, gestionar sistemas de paginación, o incluso almacenar datos en bases de datos o en el localStorage.

Por ejemplo, en un sistema de paginación, podrías ejecutar una nueva solicitud de fetch a una API cada vez que la página cambie:

createEffect(() => {
  fetch(`https://api.example.com/data?page=${page()}`)
    .then(response => response.json())
    .then(data => setData(data));
});

Esta capacidad extiende el potencial de Solid.js, permitiendo crear aplicaciones altamente eficientes y reactivas.

Con los efectos en Solid.js, los desarrolladores pueden gestionar de forma elegante y eficiente los cambios de estado dentro de sus aplicaciones. La próxima clase abordará otra primitiva reactiva clave de Solid: los memos, que optimizan aún más el sistema de reactividad. ¡Continúa aprendiendo y desarrollando habilidades para mejorar tus proyectos con Solid.js!