¿Sabes qué es eslint-plugin para React? React es una librería de JavaScript que ha desarrollado lo que llama hooks, funciones automáticas que permiten definir cuándo se ejecuta una sección de código determinada. Estos hooks, que funcionan igual que los métodos de ciclo de vida, tienen una serie de reglas importantes para asegurar el funcionamiento adecuado de nuestros proyectos. En este post, te enseñaremos qué es y cómo funciona el eslint-plugin para React, una herramienta ideal para seguir las reglas de los hooks de esta librería.
¿Qué es eslint-plugin para React?
El eslint-plugin para React, también conocido por su código eslint-plugin-react-hooks, es un plugin o extensión creado especialmente para asegurarnos que nuestro código funcione. Puedes encontrar su documentación y proceso de instalación en el npm eslint-plugin-react-hooks.
¿A qué nos referimos con esto? En nuestro post sobre las reglas de los hooks de React, te enseñamos dos reglas fundamentales de los hooks en esta librería JavaScript. Estas reglas nos dicen que no podemos llamar a un hook desde un bucle, una función anidada o una condicional. Además, nos dicen que los únicos lugares en los que podemos llamar a un hook son en un componente de tipo función o dentro de otro hook.
Entonces, lo que hace el eslint-plugin para React es advertirnos cuando no hemos seguido alguna de estas reglas. Supongamos que decidimos escribir las siguientes líneas de código:
while (true) {
const [state, setState] = useState (null);
}
Al escribir lo anterior, estamos usando el hook useState para declarar un estado dentro de un bucle, ignorando la primera regla. Entonces, el eslint-plugin subrayará el uso de este hook en rojo, como hace Word cuando tenemos un error de ortografía para advertirnos de que hay un error. Al pasar el cursor sobre el hook con el error, veremos los detalles de nuestra acción. En nuestro caso, estamos viendo el siguiente mensaje:
React Hook “useState” may be executed more than one. Possibly because it is called in a loop.
En el mensaje anterior, eslint-plugin para React nos está diciendo que el hook se está usando más de una vez, posiblemente debido a un bucle. Este mensaje, además, nos lleva a un enlace en reactjs.org donde encontramos la documentación sobre las reglas de hooks.
¿Cómo funciona el eslint-plugin para React?
Como has leído, el eslint-plugin para React funciona de una manera muy sencilla. Lo que sucede con este plugin es que tiene una serie de reglas; una de ellas es que los hooks solo pueden llamarse en los sitios correctos.
Ten presente que el eslint-plugin para React viene instalado por defecto cuando creas una aplicación con create-react-app. Esto es muy útil cuando estás aprendiendo a crear una aplicación con React, pues la extensión se encargará de revisar tu uso de los hooks hasta que lo tengas interiorizado.
Si quieres conocer más sobre esta herramienta, te invitamos a leer nuestros posts sobre cómo crear una aplicación con create-react-app y el código de una aplicación creada con create-react-app.
¿Cómo seguir?
Ahora que sabes qué es y cómo funciona el eslint-plugin para React, te invitamos a probarlo en tus proyectos. Si quieres conocer más sobre el desarrollo de todo tipo de proyectos web y las herramientas que lo hacen posible, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva e íntegra donde aprenderás a desarrollar con una amplia variedad de lenguajes y herramientas. ¡Da el paso que te cambiará la vida y apúntate ahora!
