Mira el video si prefieres:
5 cambios en React 18 que DEBES CONOCER
Son muchos los cambios en React 18, principalmente relacionados a la concurrencia en React.
Voy a estar abordando más a detalle cada uno de estos cambios con ejemplos prácticos, sobre todo porque ahora mismo me estoy tomando el tiempo de implementarlos en mis proyectos activos. Esto es algo que suelo hacer cuando algo nuevo aparece, inmediatamente intento verle la ventaja usándolo en mi proyecto inmediato (a veces termino con proyectos con stacks completamente distintos en 1 sólo año), esto es importante para mi, pues mi educación y crecimiento profesional está muy por encima en mi lista de prioridades y es una de las razones de porqué ya no busco empleo, pues el empleo me estánca. Pero esa es una historia para otra ocasión (próximamente más sobre trabajos como dev), por ahora quiero hablarte de React 18:
#1 Render concurrente
para liberar todas las características de concurrencia con las que viene React 18, es necesario cambiar a
createRoot
La forma de renderizar un componente hecho con React ha sido ReactDOM.render desde tiempos inmemoriales, pero para liberar todas las características de concurrencia con las que viene React 18, es necesario cambiar a createRoot
Este cambio es esencial, pues si actualizas a React 18 pero no cambias la forma de usar ReactDOM, tendrás un warning permanente en tu consola.
#2 Suspense en el servidor
Muchos de nosotros nos hemos cambiado a SSR (Server side rendering) en mi caso principalmente porque estoy un poco cansado de los manejadores de estados super complejos, casi casi hago un clon de la base de datos en el navegador sólo para encontrar una maldito string que necesita mi componente. Server side Rendering me evita tener que lidiar con estados en el navegador y entregar la data necesaria en cada ruta, sin mencionar las muchas ventajas que ofrece en cuestión de SEO y de velocidad, REMIX es la mejor apuesta del momento, próximamente me voy a montar en este tema profundamente, así que asegúrate de suscribirte a mi lista de correo para que no te pierdas nada sobre REMIX. 🌈
Ahora podemos usar Suspense en el servidor. Antes si lo usábamos lo único que logramos era que nuestro server se bloqueará hasta que el componente estuviera listo, ahora react le permite al servidor enviar un componente deshidratado, esto es que responde con los componentes hidratados que se tengan más los que conseguirán la data por su cuenta en segundo plano más tarde.
#3 Nuevos hooks
Nos encantan los hooks nuevos, aunque estos hooks nuevos son un poco avanzados y no son aplicables para todos los casos, 2 de ellos están orientados principalmente para ser utilidades a la hora de construir librerías sobre react y para que los manejadores de estado puedan sincronizarse mejor con React, esto es interesante por que nos habla de el tiempo que el equipo de React en Meta (Facebook) está invirtiendo para que React se mantenga relevante ahora que hay herramientas más simples y más rápidas.
Los otros hooks merecen su propio post, porque están pensados para hacer "delay" u "optimizar" los fetching de data, aunque de nuevo; Si tu ya diste el paso a SSR estos hooks no hacen sentido en un entorno de servidor, pero te serán inmensamente útiles si sigues usando create-react-app
#4 Batching automático
Para mí, esta es la razón de más peso para actualizar mis proyectos a React 18 y lo mejor es que no tengo que hacer prácticamente nada.
Una vez que nos hemos migrado a utilizar sólo hooks y componentes de tipo función en React, nos encontramos con que al tener los estados de un componente de mediano tamaño, independientes, nos vemos con la incómoda situación de que nuestro componente puede estar renderizando muchísimo más de lo necesario o incluso incurriendo en problemas de performance, React 18 ofrece una solución transparente para el developer, ahora en vez de permitir que sucedan muchos render innecesarios, hace una recopilación de estas llamadas de actualización de estado en la misma función, y una vez que se han actualizado todos los estados entonces hace 1 sólo render. Para mí, esta es la razón de más peso para actualizar mis proyectos a React 18 y lo mejor es que no tengo que hacer prácticamente nada.
#5 Podemos renderizar undefined
Ojo: no se trata de devolver undefined de forma indiscriminada, es más un pequeño cambio en los errores de "runtime" vs "warning de linterna" es decir, ahora react 18 prefiere darnos un warning y tolerar los componentes que devuelven undefined involuntario a romper toda el app con un error de "runtime", esto es que si por alguna razón tenemos un componente que no devuelve nada por accidente, nuestra app aún seguirá funcionando. Cuidado con los errores silenciosos ☠️
Esto ya no genera un error en React 18.
Hay mucho más que platicar de React 18, pero lo haremos en posts futuros, gracias por tu tiempo y por leeme, suscribete a mi lista de e-mail para que te enteres de las cosas que publico sobre desarrollo web, y créeme estaré bastante activo este año. Nos leemos luego. 🖖🏼