¿Conoces los custom hooks en React? En primer lugar, debes saber que React es una librería JavaScript que nos permite desarrollar interfaces de usuario al unir el poder del código HTML con el de JavaScript. Para ello, React ha creado componentes de tipo función y clase al igual que lo que llama hooks, funciones especiales para ejecutar código en momentos específicos del render. En este post, te enseñaremos qué son los custom hooks en React, un elemento fundamental para crear código eficiente y personalizado.
¿Qué son los custom hooks en React?
Los custom hooks en React son un tipo de función JavaScript que simula el funcionamiento de los hooks en React. Puedes conocer más sobre este concepto en el post introducing hooks de reactjs.org.
Los custom hooks en React son muy útiles siempre que tengamos una lógica que se repite entre varios componentes. En estos casos, podemos sacar esta lógica y aplicarla a un custom hook, es decir, una función que ejecute los pasos que necesitamos de manera automática.
Al no ser funciones cualquiera, los custom hooks en React deben seguir una serie de reglas para ser considerados hooks y no funciones. A continuación, te explicamos cuáles son.
El nombre empieza por «use»
La primera regla de los custom hooks en React es que su nombre debe empezar con la palabra use. Esta convención se crea siguiendo los hooks originales de React (useEffect, useState, useRef) y los posteriores hooks en React Router (useParams, useLocation, useNavigate).
Se considera que esto es una regla porque la comunidad ha decidido que es más sencillo reconocer un custom hook cuando sigue esta norma. Sin embargo, en teoría podrías crear uno con otro nombre.
Puede llamar a otros hooks
Lo que realmente tienen de particular los custom hooks en React es que pueden llamar a otros hooks. En este orden de ideas, React considera como custom hook a aquella función que dentro llama a un hook original o a otro custom hook.
¿Cómo se ven los custom hooks en React?
A continuación, te ponemos un ejemplo para demostrar cómo una función se vuelve un custom hook. En este ejemplo, hemos codificado una función para determinar si un amigo está o no en línea dentro de nuestra aplicación:
import React {useState, useEffect} from ‘react’;
function useFriendStatus (friendID) {
const [isOnline, setISOnline] = useState (null);
useEffect (( ) => {
function handleStatusChange (status) {
setIsOnline (status.isOnline);
}
ChatAPI.suscribeToFriendStatus (friendID, handleStatusChange);
return ( ) => {
ChatAPI.unsuscribeFromFriendStatus (friendID, handleStatusChange);
};
}, [friendId]);
return isOnline;
}
Como puedes ver en las líneas de código anteriores, nuestra función se llama useFriendStatus, siguiendo la primera regla de los custom hooks. Además, dentro de la función estamos declarando un estado usando el hook useState. Luego, estamos llamando a useEffect para devolverle un valor. En este sentido, estamos llamando a dos hooks dentro de useFriendStatus, siguiendo la segunda regla establecida.
En este ejemplo, useFriendStatus sirve como custom hook porque nos permite extraer una lógica que estaríamos usando a lo largo de varios componentes. Esto nos ahorra usar en cada componente el useState y el useEffect, pues esta función se encarga de llamarlos. Es decir, con solo aplicar el custom hook creado en nuestros componentes, obtendremos el dato que realmente estamos buscando, que es el estado isOnline.
Los custom hooks en React son muy útiles para extraer funcionalidades, hacer refactors y mantener nuestros componentes más simplificados. Esto es especialmente común cuando tenemos componentes que llaman a una API para obtener un dato, lo meten en un estado y ejecutan una acción determinada con él. Todos estos pasos, que al final son muy repetitivos, se simplifican con el uso de custom hooks.
Para conocer más sobre el proceso de crear un custom hook, te invitamos a leer nuestros artículos sobre crear un custom hook de contexto en React y custom hooks para mejor legibilidad en React.
¿Te animas a seguir aprendiendo?
En este post has aprendido que los custom hooks en React son un elemento fundamental para personalizar tu código. Ahora que sabes cómo, ¡ha llegado el momento de que los utilices en tus propios proyectos! Para seguir aprendiendo sobre el desarrollo de todo tipo de proyectos de programación para la web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva donde aprenderás a desarrollar con diversos lenguajes y herramientas. ¡Anímate a seguir aprendiendo con nosotros y dale un giro a tu vida!
