Hooks: la adición de React que sustituye a los Class Components

Lanzados por primera vez en octubre de 2018, los Hooks, o las API de enlace de React, ofrecen una nueva alternativa a la escritura de componentes basados en clases, o los Class Components, dando un enfoque alternativo para lo que es la administración del estado y los métodos del ciclo de vida.

Los Hooks de React aportan a los componentes funcionales las cosas y funciones que solo se podían hacer con las clases: el poder trabajar con el estado, los efectos y el contexto locales de React a través de useState, useEffect y useContext.

Los Hooks adicionales incluyen: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect y useDebugValue. 

Los beneficios de utilizar Hooks en React

Con un desarrollo en React más orientado a las funciones, Hooks te permite hacer uso de estas y así no tener que saltar entre funciones, clases, componentes de orden superior y accesorios de renderizado. Dan Abramov, cocreador de React.Js, mencionó esto en la ReactCom del 2018 cuando presentaron Hooks.

Abramov dijo "Si la comunidad de React acepta Hooks, reducirá la cantidad de conceptos con los que necesita hacer malabarismos al escribir aplicaciones de React. Hooks te permite usar siempre funciones en lugar de tener que cambiar constantemente entre funciones, clases, componentes de orden superior y accesorios de renderizado".

Hooks ha cambiado la manera en la que se escribe código en React, permitiendo a los developers escribir un código más limpio y preciso, es como si una persona se sometiera a una dieta, ya que Hooks corta el exceso de código para dejar uno más leíble y conciso. 

Para hacer un ejemplo de lo mencionado, se puede utilizar una versión de clase de “efecto de título de documento” canónico y veamos la diferencia entre cómo se solía escribir algo como esto al lado de un ejemplo usando un Hook instalado por npm que hace lo mismo.

La comparación muestra como el componente ha "perdido un poco de peso". No solamente se pueden ahorrar hasta cinco líneas de código, la legibilidad y capacidad de prueba también mejoran con el cambio a Hooks. Algo que debemos recordar es que Hooks es compatible con versiones anteriores del código que está reemplazando y puede convivir con él, por lo que no es necesario volver a escribir todo el código base de inmediato.

Cinco reglas importantes que debes tener en cuenta a la hora de usar Hooks

Antes de comenzar a utilizar Hooks para desarrollar tu aplicación con React, hay algunas reglas que debes seguir al pie de la letra: 

• Nunca llames a Hooks desde dentro de un bucle, condición o función anidada
• Un Hook debe colocarse en el nivel superior de tu componente
• Solo llama a Hooks de los componentes funcionales de React
• Nunca llames a un Hook desde una función regular
• Los Hooks pueden llamar a otros Hooks

Nuestros developers expertos en Rootstack ya han utilizado esta actualización para crear y actualizar websites y así poder dar solución a los problemas de nuestros clientes regionales e internacionales. Tú también puedes formar parte de este equipo y seguir creciendo profesionalmente.

Te recomendamos en video