¿Qué son los custom hooks en React?

Autor: | Última modificación: 7 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

¿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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!