Primitiva reactiva de SolidJS: effect

Primitivas reactivas ⚛️

En SolidJS, las primitivas reactivas son funciones y objetos que se utilizan para definir y gestionar el estado de un componente y reaccionar automáticamente a los cambios en ese estado. 🔄

🎣 Una de estas primitivas es el createEffect. 🎯

✨ El createEffect es un hook que permite ejecutar un efecto secundario, como una función, cuando algún valor reactivo dentro de su alcance cambia. 🔄

📝 Aquí tienes la sintaxis básica del createEffect:

	createEffect(() => {
  	// Aquí colocas el código que quieres ejecutar cuando los datos reactivos cambien.
	});

El createEffect se ejecutará automáticamente cada vez que alguno de los datos reactivos que se utilizan dentro de su bloque cambie.

Ejemplo de uso:

import { createEffect, createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);
  createEffect(() => {
      console.log('El contador ha cambiado:', count());		
      // Aquí puedes realizar tareas adicionales que se deben ejecutar cuando el contador cambia.
  });
  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={() => setCount(count() + 1)}>
        +
      </button>
    </div>
  );
}

export default App;

En este ejemplo, cada vez que haces clic en el botón “Incrementar”, el contador cambiará y el createEffect se ejecutará automáticamente, registrando en la consola un mensaje con el nuevo valor del contador.

¿Qué es el createEffect? 🤔🤔🤔

La cajita mágica 📦🪄

¡Imagina que estás jugando con bloques y tienes una cajita mágica! Cuando pones bloques de diferentes colores en esa cajita, algo especial sucede. Cada vez que agregas o quitas un bloque, la cajita hace algo nuevo y emocionante. 😮

El poderoso createEffect 💫

Bueno, en Solid.js, esa cajita mágica sería el createEffect. Cuando pones cosas dentro de él, como números o palabras, se convierte en una especie de guardián que está atento a esos objetos. Si alguno de esos objetos cambia, el createEffect dice: “¡Ah, algo ha cambiado!”, y entonces hace una acción especial que le hayas dicho que haga. Esa acción puede ser mostrar un mensaje en una pantalla, cambiar algo en tu juego o hacer algo interesante.

Interactividad en tu juego 🎮🎉

Por ejemplo, podrías tener un contador en tu juego que cuente cuántas veces has saltado. Cada vez que presionas un botón para saltar, el createEffect podría estar escuchando y decirte en la pantalla “¡Has saltado 5 veces!” o “¡Has saltado 10 veces!” 🦘🦘.

Haciendo que tu aplicación brille ✨😄

Así que, en resumen, el createEffect es como una cajita mágica que está observando tus bloques y cuando algo cambia, hace cosas emocionantes para ti. ¡Es una forma genial de hacer que tu juego o aplicación sea interactiva y divertida!

Side effects:

Son acciones que no son parte del flujo principal del componente (entiéndase el flujo principal como el renderizado del DOM por parte de JS.), pero podrían afectar al mismo(estado) o a su comportamiento.

Acciones que se consideran Side Effects son:

• Llamadas a API.
• Almacenamiento local como sessionStorage u
  localStorage.