Hacia la desaparición (o no) de los “Class Components” en React

Qué supone la aparición de los React Hooks

Image for post
Image for post

En la reciente conferencia “React Today and Tomorrow” de la React Conf 2018, Dan y Sophie repasaban el estado actual de React y cuáles son las novedades que están por llegar en los próximos meses destacando especialmente la aparición de lo que ellos denominan hooks como una nueva forma de trabajar con componentes que poseen estado interno. Lo cual inevitablemente lleva nos lleva a la pregunta de si los “Class Components” de React están ante sus últimos meses de existencia.

¿Pero qué problema hay con los Class Components?

Según Dan y Sophie, actualmente React se encuentra en un punto en el que necesitan resolver los siguientes problemas:

  • El tamaño inmenso de algunos componentes
  • El wrapper hell, es decir, la cantidad de elementos que se generan en el DOM virtual conforme encapsulamos componentes
  • La confusión que se deriva en ocasiones al trabajar con componentes definidos como clases.

Es este último punto sobre lo que tratará este artículo.

Cuando trabajamos con React, es frecuente enfrentarnos a menudo a la pregunta de cómo declarar un componente, es decir, si escribirlo de forma funcional o si por el contrario declararlo como una clase. Por desgracia, a veces la respuesta no es evidente, ya que puede ser que estemos ante la necesidad de escribir un componente de escasa complejidad pero que por el contrario sí necesite de un estado interno para determinada funcionalidad o recurrir al ciclo de vida de React (componentDidMount, componentDidUpdate…) para obtener los datos con los que trabajar.

En el caso de que nos decidamos por un “Class Component”, también nos enfrentaremos a algunas desventajas como son:

  • Los diferentes métodos que trabajan con el ciclo de vida a menudo están relacionados unos con otros, lo cual incrementa la dificultad a la hora de entender el código.
  • Este tipo de componentes son más difíciles de testear que los componentes de tipo funcional.
  • La habitual lucha con el binding de “this”.
  • El tiempo de compilación y el tamaño de los mismos suele ser bastante mayor que el de los componentes funcionales.

Es decir, atendiendo a esos 4 puntos es donde aparece la solución propuesta para la versión 16.7alpha de React: hooks.

Hooks en React 16.7

Con la llegada de los hooks a React, seremos capaces de engancharnos desde componentes funcionales tanto al estado de React como a su ciclo de vida sin necesidad de escribir un componente de clase. Podríamos resumirlo del siguiente modo:

Image for post
Image for post

Veamos su funcionamiento comparándolo con su equivalente si estuviéramos escribiendo un “Class Component”.

El hook useState nos permite usar un estado local en componentes funcionales:

Como veis, la función useState es un hook que nos permite declarar un estado local dentro del componente funcional y trabajar con él del mismo modo que hacemos con los componentes declarados como clase. Esta función, devuelve un par de valor, el estado actual y un setter que nos permite actualizarlo cuando lo necesitemos. Por supuesto también es posible añadir múltiples hooks dentro de un mismo componente

Si lo comparamos con un componente de clase que replique esta funcionalidad, la simplicidad ganada es evidente:

Si queréis investigar más sobre useState os recomiendo que visitéis la documentación oficial:

Además de poder añadir un estado local a un componente funcional, los hooks también nos permiten engancharnos al ciclo de vida de React desde un componente funcional, es decir, a los métodos componentDidMount, componentDidUpdate y componentWillUnmount . Por ejemplo:

Como es de esperar, también se pueden emplear múltiples effectHooks dentro de un mismo componente funcional para realizar distintas acciones. También existe documentación oficial al respecto de esta nueva funcionalidad la cual os animo a visitar y leer tranquilamente:

Conclusiones

Como véis, la llegada de los hooks nos trae la posibilidad de escribir código en React mucho más simple y fácil de testear sin tener que recurrir a la complejidad inherente de los componentes de clase. En palabras del propio Dan Abramov:

Es decir, esta funcionalidad no ha sido lanzada a la ligera sino que lleva bastante tiempo por lo que parece en la cabeza de las personas que mantienen React, lo cual es de agradecer dada la importancia que acarrea consigo la integración de hooks en una librería.

¿Significa esto que veremos desaparecer los componentes declarados como clase?

Por supuesto que no, al menos de momento tal y como dice la propia documentación oficial de React

TLDR: There are no plans to remove classes from React.

We all need to keep shipping products and can’t afford rewrites.

Sin embargo, sí que animan a probar esta nueva funcionalidad ya que gracias a ella obtenemos multitud de beneficios derivados como:

  • Componentes más ligeros y la posibilidad de compartir aún más lógica entre distintos componentes
  • Eliminar la necesidad de recurrir a HOC’s o el patrón render props para pasar datos exclusivamente
  • Reducir el tamaño de los bundles

Además, existen más hooks que no he mencionado en este artículo para no hacerlo especialmente denso que merece la pena investigar y con los que familiarizarse porque posiblemente éstos representen una parte del futuro hacia el cual se está encaminado React.

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter:

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store