Signals en SolidJS: crea datos reactivos
Contenido del curso
David Martínez López
Francisco Bourquin
Kenneth Angulo L
Kenneth Angulo L
Luis Rodolfo Reyes
Luis Valentin Iglesia Feller
Samuel Burbano
Profesor
Sebastian Lomas
Jeisson Felipe Rodriguez Prieto
Jeisson Felipe Rodriguez Prieto
Una buena opción para sustituir a Copilot, porque no siempre se puede pagar o se acaba la prueba de 3 meses xD, es Amazon CodeWhisperer.
createSignal es igual a un useState de React. (no sé si en vue o angular el mecanismo es similar).
¿Dónde encajan los signals en mi código?
Aunque la reactividad de Solid es independiente, la mejor práctica es inicializar tus signals dentro de la función del componente si ese dato pertenece exclusivamente a esa vista.
Piensa en el componente como una caja de herramientas. Si el signal es un martillo que solo vas a usar para construir esa silla específica (tu componente), guárdalo dentro de esa caja. Esto hace que tu código sea predecible y fácil de leer para otros desarrolladores. Sabrán de inmediato que al montar ese componente, se crea ese estado, y al destruirse, el estado desaparece. Si el dato necesita ser compartido por toda la aplicación, entonces sí convendría extraerlo a un archivo externo.
¿Por qué leer un signal requiere una función?
Porque Solid.js necesita rastrear exactamente dónde estás utilizando ese dato para actualizar solo esa parte. Piensa en el getter (por ejemplo, count()) como si fuera un sensor de movimiento. Al ejecutar la función, no solo estás pidiendo el valor actual, sino que estás activando el sensor.
Cuando llamas a la función dentro de un elemento JSX, Solid registra esa ubicación específica. Así, cuando el valor cambia en el futuro, el framework sabe exactamente qué nodo del DOM debe modificar, sin tener que volver a renderizar todo el componente. Si el valor fuera una simple variable estática, Solid no tendría forma de escuchar cuándo y dónde se solicitó esa información, perdiendo su capacidad de actualización granular.
por qué el equipo de react no pensó hacer eso antes?
El signal es como un useState en react ?
Tiene el mismo proposito, que es manejar estado, pero es mas parecido a los refs() de vue debido a como funciona. El state en react causa un re-render en todo el componente, mientras que los signals (solid) y refs (vue) solo actualizan las partes especificas donde se use dicho signal.
Signal: Contienen valores que al cambiar actualizaran automáticamente todo aquello que este usando ese valor.
Las primitivas reactivas de SolidJS 🚀
¿Qué son? 🤔
son funciones que crean y gestionan datos reactivos en la aplicación.
Estos datos cambian automáticamente cuando sus dependencias cambian, optimizando las actualizaciones de la interfaz.
SolidJS utiliza las primitivas, como signals, memos y effects, para detectar y reaccionar a los cambios en los datos. Estas primitivas se crean con la palabra clave create.
//import logo from './logo.svg'; import styles from './App.module.css'; import { createEffect, createSignal } from 'solid-js'; const [count, setCount] = createSignal(0); let intervalId; function App() { const handleIncrement = (step) => setCount(Math.max(count() + step, 0)); const handleMouseDown = (step) => intervalId = setInterval(() => handleIncrement(step), 200); const handleMouseUp = () => clearInterval(intervalId); return ( <div class={styles.App}> <h2>Count: {count()}</h2> <button onClick={() => handleIncrement(1)} onMouseDown={() => handleMouseDown(1)} onMouseUp={handleMouseUp}> + </button> <button onClick={() => handleIncrement(-1)} onMouseDown={() => handleMouseDown(-1)} onMouseUp={handleMouseUp}> - </button> </div> ); } export default App;
