Y eso de React Hooks? Qué te parece?

Y eso de React Hooks? Qué te parece?

Un Hook en react (concepto recién introducido en Octubre de 2018) te permite “colgarte” o si buscáramos una mejor traducción sería algo como integrarte con el manejo de estado y los métodos del ciclo de vida de un componente, desde un componente funcional. Los hooks, proveen de una API que permite a los componentes funcionales manejar un estado, y definir lógica para el ciclo de vida de un componente.

Pero, por qué los hooks?

Básicamente para solucionar 3 problemas:

  • Compartir y reutilizar lógica entre componentes
  • Reducir el tamaño de componentes muy complejos
  • Eliminar la confusión que las clases generan.

Bueno, ¿Y las clases que?

Las clases no son tan amigables como pensábamos, son complicadas de entender para algunos programadores, especialmente por algunas características que las hacen particulares en JavaScript, y además, son complejas para algunas tareas como la optimización de código, minificación, etc.

Venga aprendamos de que va esto:

Existen dos tipos de Hooks en React, los hooks del framework que vienen predefinidos y los hooks personalizados, que cada desarrollador puede crear para poder reciclar funcionalidad entre componentes.

Uno de los hooks del framework más populares y útiles es useState, por cierto, la convención para nombrar un Hook es usar la palabra use, seguida de un descriptor para el hook, como en este caso state porque a través de este hook podemos integrarnos con el manejo de estado del componente.

Para usar un Hook primero necesitamos un componente funcional, ojo, los hooks sólo funcionan con componentes funcionales y no con componentes clase:

Ejemplo:

import React from 'react';
function Example(){
  return(
        <div>{name}</div>
    )
}

Para definir una propiedad del estado del componente con hooks usamos algo así:

const [name, setName] = useState('Paco');

Las variables name y setName, contendrán el valor del estado y una función para modificar el estado respectivamente, estas variables son asignadas con el resultado de usar el hook useState, el valor que enviamos como argumento de useState es el valor por defecto para name.

Esto equivale a:

this.setState({
    name: 'Paquito'
})

Luego de cada modificación, React sabrá que tiene que realizar una actualización del componente, tal como siempre lo ha hecho cuando modificamos el estado del componente.

Además del hook de manejo de estado, React tiene otros hooks entre los que destacan:

  • useEffect
  • useContext
  • useReducer

Entre muchos otros que puedes encontrar aquí:

https://reactjs.org/docs/hooks-reference.html

Entonces, todo es color de rosa?

Pues podríamos decir que no, dentro de sus principales problemas está:

  1. Por un lado, sólo puedes mandarlos a llamar en el cuerpo de la función, y no pueden llamarse dentro de condicionales, ciclos, o cualquier otra estructura que agregue un nuevo nivel de ejecución al componente:
import React from 'react';
function Demo(){
  const [name,setName] = useState('Pepe'); // Correcto ✅
  if(true){ const [counter,setCounter] = useState(0) // Incorrecto ❌ }
  return(
        <div>{name}</div>
    )
}

Porqué? : El framework asume que tus hooks serán mandados a llamar en el mismo orden en cada ejecución del render de tu componente, cambiar esto podría traducirse en bugs.

2. Segundo problema: Los hooks no pueden usarse dentro de componentes clase y son exclusivos de los componentes funcionales, no significa que los componentes clase vayan a ser reemplazados. De hecho, la documentación de React recomienda no reemplazar componentes complejos de clase, con componentes funcionales que usen hooks, por ahora se recomienda usarlos en pequeños componentes que nos ayuden a familiarizarnos con el concepto.

Resumiendo:

  1. El API de los Hooks luce increíble, resuelve algunos problemas identificados de React.
  2. Parecen no alinearse tan claramente con la filosofía de React, de que todo debe estar explícito en el código.
  3. Aún hay que darle un voto de confianza y probar!

Entonces surgen muchas dudas no?

Aquí van las respuestas a algunas de las preguntas más frecuentes:

1.Necesito reescribir mis componentes class?

No. No hay planes de quitarlos,  no podemos permitirnos re-escribir todo el código, solo necesitamos incorporar cosas nuevas y mejores. Se recomienda incorporar los hooks al nuevo código.

   2. Cuanto de mi conocimiento actual perdura?

Este nuevo concepto es una forma más directa de hacer lo que ya sabes, no cambia los conceptos actuales ni el flujo de trabajo.

  3. Debo usar hooks, clases o un mix de ambos?

Lo recomendable que empieces a usar los hooks de manera progresiva en el nuevo código que escribas. No se deben reescribir clases a menos que lo necesites. No puedes usar los hooks dentro de un componente clase, pero si puedes usar componentes de función con hooks y clases en un solo proyecto.

  4. Cubren los hooks todos los casos de uso de las clases?

Ahora mismo no, aunque es plan a corto plazo. Falta soporte para los métodos del ciclo de vida: getSnapshotBeforeUpdate  y componentDidCatch.

Además algunas implementaciones como el soporte para DevTools o  Flow/TypeScript tampoco están listas. Algunas librerías de terceros tampoco están disponibles.

  5. Reemplazan los hooks a las render props y a los higher-order components?

A menudo, las render props y los higher-order components renderizan solo un hijo. Los hooks son una forma más simple de manejar estos casos. Aún hay lugar para los dos patrones (por ejemplo un componente  scroller puede tener una renderItem prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree.

  6. Qué significan los hooks para las APIs como Redux connect() y React Router?

Continuarán funcionando como siempre. En el futuro las versiones nuevas de estas librerías también exportarán Hooks personalizados como useRedux() o  useRouter()que permitirán usar estas funcionalidades sin usar componentes wrapper.

  7. Trabajan los Hooks con tipado?

Los Hooks fueron diseñados con tipado estático en mente, ya que son funciones, son más fáciles de tipar que los HOC.

Se ha contactado a los equipos de Flow y TypeScript por adelantado, y planean incluir definiciones para React Hooks en el futuro.

Y lo que es más importante, los Hooks personalizados te dan el poder de restringir la API React si quieres escribirlos de una manera más estricta. React le da los primitivos, pero puede combinarlos de diferentes maneras a las que le ofrecemos de manera inmediata.

  8. Como hacer tests de los componentes que usen Hooks?

Desde el punto de vista de React, un componente que usa Hooks es solo un componente regular. La prueba de componentes con Hooks no debería ser diferente de la forma normal en la que se prueban los componentes.

 

6 Comments
  1. This info is invaluable. Where can I find out more? Arlena Gaelan Wallas

  2. Can I simply say what a relief to discover an individual
    who actually understands what they’re discussing on the web.
    You definitely understand how to bring a problem to light and make it important.
    A lot more people have to check this out and understand
    this side of the story. I was surprised that you aren’t more
    popular since you definitely possess the gift.

  3. Nice post. I was checking constantly this blog
    and I am impressed! Very useful info particularly the ultimate phase
    🙂 I maintain such information much. I was seeking this particular info for a
    long time. Thanks and good luck.

  4. After exploring a few of the blog posts on your blog, I truly appreciate your technique of writing
    a blog. I saved as a favorite it to my bookmark site list and will be checking back in the near future.

    Take a look at my web site as well and tell me how you feel.

Comments are closed.