React es una librería conocida por facilitar el desarrollo de interfaces de usuario a través de la unión de JavaScript con HTML. Para ello, React ha desarrollado su propia sintaxis con base en componentes de tipo clase, componentes de tipo función y hooks. En este post, te enseñaremos cuáles son las reglas de los hooks de React, un conocimiento fundamental para el adecuado funcionamiento de tus aplicaciones web.
¿Qué son los hooks en React?
Los hooks en React son una nueva adición a la sintaxis de esta librería JavaScript. Este elemento nos permite reemplazar los métodos de estado y ciclo de vida de componentes en React, una serie de funciones que empiezan con “use” y que nos permiten definir secciones de código a ejecutar en momentos específicos de render.
Los hooks se introdujeron en las versiones recientes de React para reemplazar estos métodos y alejar el código de los componentes de tipo clase. Es decir, nos permiten utilizar el estado y otras funciones claves de React sin necesidad de declarar una clase.
Además de los hooks básicos que conocemos de React (useState, useEffect, useRef), esta librería nos permite crear nuestros propios hooks para ejecutar diversas acciones. Para conocer más sobre el tema, te invitamos a explorar nuestros posts sobre custom hooks en nuestro blog de desarrollo web.
Al igual que con todos los elementos de sintaxis de un lenguaje de programación, existen una serie de reglas de los hooks de React que son fundamentales. Seguir estas reglas puede asegurarnos que las aplicaciones que creamos en esta librería funcionen adecuadamente. A continuación, te enseñamos cuáles son.
¿Cuáles son las reglas de los hooks de React?
Las reglas de los hooks de React pueden encapsularse en dos normas generales, que son las siguientes:
Llamada desde el nivel más alto
La primera de las reglas de los hooks de React es que solamente podemos llamar a un hook desde el nivel más alto del componente. Es decir, nunca podremos llamar a un hook dentro de elementos como bucles, condicionales y funciones anidadas.
Entonces, supongamos que tenemos un componente en el que hemos hecho uso de useState para declarar un estado y de useEffect para definir una sección de código a ejecutar justo después del primer render.
Ahora, supongamos que tenemos una función declarada dentro de nuestro componente para manejar algún evento. Siguiendo la regla de la llamada desde el nivel más alto, no podemos llamar a un hook para, por ejemplo, declarar un estado desde esta función. Tampoco podríamos hacerlo desde un condicional if o un bucle, sea for o while.
Esta arregla se aplica a todos los hooks de React, no hay excepción. Esto quiere decir que solo los podemos usar en el nivel del cuerpo principal del componente, pues usarlos en otros momentos puede alterar la lectura de React y el funcionamiento de nuestra aplicación.
Llamada desde componentes función u otros hooks
Además del nivel en el que podemos llamar a nuestros hooks, también existe una regla sobre desde la que podemos llamarlos.
La segunda de las reglas de los hooks de React nos dice que solo podemos llamar a un hook desde componentes de tipo función en React (es decir, las declaradas con la palabra clave function o con arrow functions) o desde dentro de otro hook.
Esto significa que no podemos llamar a un hook desde una función cualquiera, lo cual mantiene la primera regla de la llamada desde el nivel más alto de un componente.
¿Quieres seguir aprendiendo?
Ahora que sabes cuáles son las reglas de los hooks de React, ¡conoces una parte clave de esta librería de JavaScript! Si quieres seguir aprendiendo sobre esta y muchas otras herramientas de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar lenguajes y herramientas como JavaScript, HTML, CSS, JSX y webPack. ¿Quieres seguir aprendiendo para convertirte en un experto y cambiar tu vida? ¡No te pierdas este bootcamp y pide información!
