Hooks Personalizados como Interfaces de Programación
Crear una mejor experiencia para programadores
Las interfaces de programación son la forma correcta de reducir complejidad en nuestros desarrollos. Por esto, existen programadores expertos ensamblando lógicas intricadas, que crean aplicaciones de alto nivel, mediante la conexión de apis. Por otro lado, existen programadores especializados en la construcción de las interfaces de programación, que reducen y abstraen la carga lógica de forma simple.
Interfaces de programación simples y objetivas permiten realizar pagos, subir archivos y hacer streaming de forma natural y sencilla.
Revisemos en profundidad, diferentes formas de abstraer las tareas que se realizan dentro de una aplicación de React, usando Hooks Personalizados. Comenzaremos por entender, cómo funcionan los dos hooks más importantes, el hook de estado, que nos permitirá retener estados en el componente, y el hook de efecto, que nos permitirá reaccionar a los cambios de estados para computar nuevos valores.
Hook de estado — useState
El hook useState permite anclar al componente un valor inmutable, el cuál cambiará, sólo cuándo el ajustador lo determine. Un estado está determinado por la pareja de valor y ajustador. Dónde el valor puede ser cualquiera soportado en una variable, un texto, un número, un booleano, un arreglo, un objeto, etc. El ajustador, es una función que recibe el nuevo valor que tendrá el estado.
Sintaxis
const [value, setValue] = useState(defaultValue)Dónde
valuerepresenta el valor del estado,setValuees la función que ajusta el nuevo valor ydefaultValuees el valor inicial por defecto.
En el siguiente ejemplo, se observa el uso de un estado, para retener el valor de dos contadores independientes. Cada botón incrementa a cada contador.
Hook de efecto — useEffect
El hook useEffect permite observar los cambios de estados o propiedades listados como dependencias. Un efecto está determinado por una función callback que es ejecutada cuándo el valor de alguna dependencia cambia.
Sintaxis
useEffect(callback, dependencies)Dónde
callbackes una función ydependencieses un arreglo de estados o propiedades que serán observados, cuándo alguno cambia, elcallbackes ejecutado.
Nota: La función del efecto, devuelve, opcionalmente, otra función callback que se ejecuta cuándo el componente se desmonta, permitiendo así un proceso de limpieza.
Por ejemplo, si la función callback del efecto crea un intervalo con setInterval, entonces, en el callback devuelto se invoca a clearInterval, para no dejarlo ejecutando, evitando el error de acceso a valores no alcanzables.
En el siguiente ejemplo, se muestra el uso de un efecto para construir un contador temporizado. Otro estado controla si el contador debe detenerse.
El efecto tiene la dependencia del estadoisStopped, cuando el estado cambia según los botones de Detener y Reanudar, el efecto determina si ejecutar el intervalo o no. El efecto también depende del estado counter, ya que los efectos capturan en su forma inicial, a los valores externos, es decir, cuándo se ejecuta el efecto, se captura counter y setCounter en sus formas iniciales, sin embargo, cuando counter cambie, el efecto no lo notará a menos que esté en las dependencias.
Hooks Personalizados
Los hooks personalizados son funciones que comienzan con el prefijo use. Estas funciones están limitadas a consumir otros hooks y no es correcto poner lógica fuera de estos.
Los hooks personalizados abstraen y generalizan un flujo lógico mediante otros hooks.
Sintaxis
function useMyCustomHook(...params) {
// TODO: Inicializar otros hooks, estados, efectos y demás
// Devolver una interfaz de programación
}Dónde
useMyCustomHookes el nombre del hook personalizado y el resultado devuelto es una interfaz de programación usada para consumirlo.
En el siguiente ejemplo, se construye un hook personalizado llamado useTimerCounter, que define dos estados, uno para el valor contado, y otro para saber si está detenido. Luego, se define un efecto sobre el contador y el estado de detenido, que determina, si incrementar el contador cada segundo. Finalmente devuelve una interfaz de programación, que es un objeto con el atributo value, que tendrá el valor contado, y los métodos start, stop y reset para iniciar o reanudar, detener y resetear el contador.
El objeto devuelto por useTimerCounter, es la interfaz de programación, con los métodos para iniciar, detener y reiniciar.
Manos a la obra
Ahora que entendemos cómo funcionan los hooks personalizados como interfaces de programación. Procedamos a crear un proyecto integral, para madurar los conocimientos y poner en práctica lo aprendido.
El proyecto consiste en consumir el api de randomuser.me/api, la cuál provee información de usuarios aleatorios y soporta paginación.
Vamos a definir el hook useRandomUserApi, que nos proveerá los métodos, estatus y datos necesarios de consumo del api. El código ha sido comentado a detalle, explicando cada parte.
Conclusiones
Hablamos sobre los hooks personalizados, que nos permiten crear interfaces de programación. Los dos hooks más importantes de React, son useState y useEffect, con los que podemos anclar estados y efectos sobre los estados. Finalmente, hemos puesto manos a la obra, creando un hook personalizado llamado useRandomUserApi, con el que consumimos el api de una forma sencilla y directa.
Cuando creamos una aplicación, debemos separarla en tareas, estas tareas debemos dividirlas en flujos lógicos.
Debemos abstraer y generalizar el flujo, para exponer nuestra propia interfaz de programación, con la cual los programadores interactúan de una manera sencilla y armónica.
Documentación
Documentación oficial de React JS
Introducción a los hooks
El hook de estados — useState
El hook de efectos — useEffect
Stackblitz oficial de Dragon Nomada
