Ha llegado React.js 16

Por fin han liberado la versión 16 de React.js y con ella interesantes mejoras, aquí daremos un vistazo las características más interesantes de esta versión.

React Fiber

El equipo de Facebook ha reescrito una gran cantidad de código interno de React.js, incluyendo el algoritmo de su núcleo principal al que ellos han denominado React Fiber ellos nos cuentan que es la culminación de 2 años de investigación por el equipo de desarrollo de React y donde incluye entre otras cosas el poder hacer el trabajo de renderizado en trozos y extender el renderizado en múltiples frames, la capacidad de pausar, retomar o abordar el trabajo a medida de que recibe nuevas actualizaciones. ok… ok… pero este es un articulo en español que no ¿Que obtenemos con eso? Bueno de entrada unas grandes mejoras en rendimiento, se promete un incremento en la fluidez aplicaciones, por si fuera poco todas estas mejoras son internas por lo que no debemos preocuparnos ya que el equipo de Facebook se han preocupado que el API siga compatible con la versión anterior por lo que no tendremos rompimiento de nuestro código ya creado 😏 .

Manejo y límite de errores

Aunque no suelo casarme con una tecnología, desde que probé React en 2015 me ha fascinado, sin embargo una de las partes que siempre me disgusto fue la forma de revisar errores en los componentes, suponiendo que tenemos la siguiente aplicación <App /> que tiene un subcomponente <Avatar /> y este a través de sus props recibe datos como el nombre de usuario email etc:

Como al usar el componente <Avatar /> no le pasamos las props de data lanzaria el siguiente error:

Al ocurrir este tipo de errores la aplicación deja de funcionar ya que se bloquea el árbol de componentes principal, afortunadamente ahora con React 16 podemos limitar los errores y si llegasen a ocurrir, estos son mucho más claros, dentro de los métodos de ciclo de vida disponemos del método componentDidCatch (error, info) El cual podríamos usar de la siguiente forma (línea 16):

Ahora podemos dar informacion facilmente de errores en nuestro UI

Podemos gestionar los errores de nuestros componentes como mejor nos convenga, podriamos incluso generar un componente de alto orden HOC para gestionarlos o crear un componente padre que gestione los errores se sus componentes hijos, pero esto ya es nuestra decisión 😎 de como lo querramos hacer estos manejos.

Nuevos tipos de retorno

Es de lo más común el querer renderizar listas de elementos, hasta hace poco teníamos que generar un componente de envoltura y después mapear la lista de elementos, ahora podemos hacerlo directamente, lo que nos abre un mundo de posibilidades sobre todo para crear y extender librerías:

Un ejemplo de sencillo de retorno múltiple.
Resultado de renderizado múltiple en React 16

Ahora también podemos retornar directamente un string

Puedes ver mas información de las posibilidades de retorno directamente en la documentación de React.

Portals

Una característica muy interesante son los portals los cuales nos permiten renderizar un nodo del DOM fuera de la jerarquía DOM del padre.

Lo más común es que querramos que nuestro componente sea renderizando dentro de otro, por ejemplo si tenemos un componente <Header /> queremos que se renderize dentro de otro componente <App> de la siguiente forma:

<App>
<Header />
</App>

Sin embargo en algunas ocasiones es mejor que este sea renderizado fuera del padre, un ejemplo común según la documentación es una ventana modal la cual no tiene tanto sentido que se renderize por ejemplo dentro del componente<Header /> tal vez un mejor acercamiento sería que se creará un elemento div al vuelo y que se renderiza allí, justamente para eso son los portals, la declaración es muy similar a como se renderiza el nodo principal de nuestra aplicación conReactDOM.render

La declaración sería: ReactDOM.createPortal(child, container)

Puedes echar un vistazo a los Portals en la Documentación de React

Compatibilidad

Como te comente previamente a pesar de los grandes cambios internos el equipo de Facebook se a esforzado porque todo el API sea consistente por lo que tu aplicación React existente debería de correr sin problema, lo único importante a resaltar es que React 16 utiliza Map y Set, no deberías tener problema con navegadores modernos pero si das soporte a versiones antiguas puedes utilizar algún polyfill como por ejemplo babel-polyfill.

Licencia

Por ultimo quiero hablar un poco sobre las preocupaciones legales en torno a React.js, ya que en los últimos tiempos, se hablo de que Facebook cambio el tipo de licencia asociada a React (BSD + Patentes) Lo que le daba ventaja a Facebook en demandas contra patente, por este motivo muchos desarrolladores y empresas se comenzaron a replantear el uso de React.js para sus proyectos, por fortuna Facebook cambio de idea y antes de lanzar la versión 16 han cambiado la licencia ahora con MIT, por lo que ahora esas preocupaciones legales han desaparecido y podemos seguir y enfocar todos nuestros esfuerzos con el desarrollo de nuestras hermosas apps.

Encuentra más información en este Link del lanzamiento.