Introducción a los ganchos de reacción

¿Qué son los ganchos?
Los ganchos son una nueva incorporación en React 16.8. Permiten a los desarrolladores usar el estado y otras funciones de React sin escribir una clase. Por ejemplo, el estado de un componente.

Es importante tener en cuenta que los ganchos no se usan dentro de las clases.

¿Por qué la necesidad de ganchos?
Existen múltiples razones responsables de la introducción de los Hooks que pueden variar según la experiencia de los desarrolladores en el desarrollo del producto React. Algunos de ellos son los siguientes:

• Uso de la palabra clave ‘this’ : la primera razón tiene que ver más con javascript que con React en sí. Para trabajar con clases, uno necesita entender cómo funciona la palabra clave ‘esta’ en javascript, que es muy diferente de cómo funciona en otros idiomas. Es más fácil comprender el concepto de accesorios, estado y flujo de datos unidireccional, pero el uso de la palabra clave ‘esto’ puede generar problemas al implementar componentes de clase. También es necesario vincular los controladores de eventos a los componentes de la clase. El equipo de desarrolladores de React también observó que las clases no se concisan de manera eficiente, lo que lleva a que la recarga en caliente no sea confiable, lo que se puede resolver con Hooks.
• Lógicas con estado reutilizables: esta razón toca temas avanzados en React, como los componentes de orden superior (HOC) y el patrón de accesorios de representación. No hay una forma particular de reutilizar la lógica de componentes con estado para React. Aunque este problema se puede resolver mediante el uso de HOC y patrones de accesorios de representación, hace que el código base sea ineficiente, lo que se vuelve difícil de seguir, ya que uno termina envolviendo componentes en varios otros componentes para compartir la funcionalidad. Los ganchos nos permiten compartir la lógica con estado de una manera mucho mejor y más limpia sin cambiar la jerarquía de los componentes.
• Simplificación de escenarios complejos: al crear componentes para escenarios complejos, como la obtención de datos y la suscripción a eventos, es probable que todo el código relacionado no esté organizado en un solo lugar y esté disperso entre diferentes métodos de ciclo de vida.
  Por ejemplo, las acciones como la obtención de datos generalmente se realizan en componentDidMounto componentDidUpdate, de manera similar, en el caso de los detectores de eventos, se realiza en componentDidMounto componentWillUnmount. Estos desarrollan un escenario en el que códigos completamente diferentes, como la obtención de datos y los detectores de eventos, terminan en el mismo bloque de código. Esto también hace imposible frenar componentes a componentes más pequeños debido a la lógica de estado. Los ganchos resuelven estos problemas, en lugar de forzar una división basada en el método de ciclo de vida. Los ganchos le permiten dividir un componente en funciones más pequeñas según las piezas relacionadas.

Cosas importantes para recordar al usar ganchos:

• Los ganchos están disponibles para React versión 16.8 o superior.
• Los ganchos son completamente opcionales. Úselo parcialmente para algunos componentes o base todo el proyecto según sus necesidades sin reescribir ningún código existente.
• Los ganchos no contienen cambios importantes y son 100 % compatibles con versiones anteriores.
• El equipo de reacción no tiene planes de eliminar clases de React.
• Los ganchos no se pueden usar dentro de los componentes de clase y, sin embargo, la aplicación definitivamente puede mezclar componentes basados ​​en clases y componentes funcionales con ganchos.
• Hooks no viola ningún concepto de React existente. En cambio, Hooks proporciona una API directa para reaccionar conceptos como accesorios, estado, contexto, referencias y ciclo de vida.