Los que nos gusta y venimos de experiencias con React nos va a encantar Solid js.
En síntesis, podemos decir que la mayor ventaja de Solid sobre React radica en dos puntos principales:
- Tamaño del Bundler: En Solid es más ligero porque ya contiene módulos que en React se manejan como lib de terceros.
- Signal por States: Lo que es completamente diferente al comportamiento del state en React de re-renderizar el componente cada que el estado cambie. Eso pasa por el algoritmo Diffing & Reconciliation. Si no estás familiarizado, te dejo el link para que entiendas el concepto detrás del algoritmo.
Solid, por su parte, crea señales (signals) directamente en elementos del DOM que inteligentemente percibe que podrían cambiar, previniendo así, re-renderizar el componente al actualizar el elemento.
Ya que hemos sacado del camino lo que todos sabemos de Solid Js, quiero enfocarme en algunas diferencias en la API de Solid con respecto a React para comparar como lo hace React y mostrarte cómo lo hace Solid js.
- useState - createSignal.
Mientras que state crea un valor, signal crea una señal que es un método a cuyo valor se accede al ser invocado, por eso los paréntesis. La Función setCounter cumple la misma función para ambas herramientas.
La sintaxis puede variar un poco, sin embargo:
- Eventos Si bien vimos en las imágenes anteriores que el evento onClick no cambia de React a Solid, sí el método para los inputs. En React lo llamamos onChange, y en Solid será onInput:
- useEffect - createResource Si bien el useEffect es una de las herramientas más populares de React, también es requiere mucha atención para no terminar ejecutando código (típicamente asíncrono) más veces del que debería. Con frecuencia vemos algo así en nuestra consola con un solo fetch, contra lo que tenemos que juntar cabezas para crear una solución performante:
Entonces, Comparemos:
Usando el hook createResource que viene directamente de solid-js sin la ayuda de effectos para ejecutar la función en montaje.
- Ternarios y múltiples elementos. Una de las prácticas más comunes en React es la del método .map() para renderizar varios elementos y dinamizar los valores del mismo. Esta práctica usualmente involucra un ternario (hay muchas otras opciones, es verdad) pero quedémonos con la más común, que es la crear un ternario para evaluar si el estado ya se ha populado y puede ser mappeado. Algo así:
Este es un escenario bastante común en React. Estas mismas lineas de código pueden existir en Solid y funcionaría sin problemas, pero Solid tiene una solución más sofisticada:
A. Para el ternario, utiliza una etiqueta que se llama que se importa de "solid-js" y recibe dos atributos, when={// aquí se hace la evaluación de la condición} fallback={//aquí ponemos lo que queremos renderizar mientras el valor de la señal cambia} Quedando de esta manera:
B. A pesar de a estas alturas, aun estamos codeando muy "Reactive". Solid ofrece otra alternativa a los elementos que se quieren renderizar de forma dinámica. En esta ocasión es otra etiqueta que se llama que también se importa de "solid-js" y recibe un atributo each={//Aquí depositamos el arreglo de valores} de hecho, tuve que forzar un error sintáctico el la imagen anterior para evitar el error de eslint en el que Solid me recomienda usar esa etiqueta:
- Routes. En React, el enrutamiento típicamente se trabaja con "react-router-dom". Durante este momento es bastante oportuno hacer code splitting usando lazy y Suspense... Estos dos elementos siguen presentes en Solid. Sin embargo, a lo que me refiero es a esto:
Esto es en React, que se importa de esta librería:
Ahora, "react-router-dom" también tiene otros elementos que son muy útiles, como:
a.
b. useParams
Ahora, Solid ya tiene en sí un módulo de enrutamiento al que podemos importar de "@solidjs/router"
Este módulo contiene:
a.
b.
c. /=> que es la versión de Solid
d. useParams
Con esto termino mi blog de comparación de ambas herramientas. Venir desde React hace que aprender Solid sea muy fácil, y nos ayuda a apreciar las mejoras que ofrece.
Espero que este contenido haya sido útil.
Top comments (1)
Estaría increible que utilizarás el hashtag #spanish