He estado buscando escribir mis propios ganchos React, pero hasta ahora me cuesta decir a nivel técnico cuál es la diferencia entre una función JavaScript normal y un gancho.

Por ejemplo, este artículo dice que los ganchos son «funciones normales de JavaScript que pueden usar otros ganchos dentro de él», pero ¿qué más está sucediendo debajo del capó?

Sé que usamos la palabra use en el nombre del gancho, pero tengo curiosidad por saber de qué se trata los ganchos que los hacen ganchos y no las funciones.

Muchas gracias de antemano.

¡de qué se trata los ganchos que los hacen ganchos y no funciones!

Los ganchos son funciones. Lo especial de ellos es cuál es su propósito y cuándo se supone que deben usarse. Su propósito es brindarle una forma de interactuar con el ciclo de vida del componente de reacción, y se implementan para que funcionen correctamente solo si se los llama mientras se procesa un componente funcional.

El equipo de reacción ha implementado 10 de estas funciones . Le permiten hacer cosas como administrar el estado o ejecutar efectos secundarios. Puede mezclarlos y combinarlos de la forma que desee, y si coloca el código en un método auxiliar, esto se conoce como un «enlace personalizado».

Los ganchos de reacción no se introducen de ninguna manera para ser diferentes de las funciones de JavaScript. Se introducen para dar el poder de los componentes de clase a los componentes funcionales.

Por ejemplo, no puede tener ningún tipo de administración de estado local dentro de un componente funcional, tendría que convertirlo en un componente de clase si necesita introducir un estado. Ahora con la introducción de los ganchos, puede usar useState para dar a los componentes funcionales el poder de la gestión de estado de los componentes de clase.

Explicación simple:

Funciones de Javascript: método o instrucciones para los navegadores para activar algunos eventos cuando se llama o se requiere.

Ganchos de reacción: estas también son funciones de Javascript, solo se basan en algún ciclo de vida de la biblioteca. React Hooks combina un montón de métodos (funciones) como componentsDidMount (), componentDidLoad (), etc. y lo envuelve todo en uno.