Los custom hooks son funciones de JavaScript que podemos crear en nuestro código React para llamar a procesos repetidos a lo largo de distintos componentes. En este post, te enseñaremos cómo crear un custom hook de contexto en React, una función especial para llamar a un contexto desde varios componentes.
Antes de empezar
Antes de enseñarte cómo crear un custom hook de contexto en React, te introduciremos el ejemplo que usaremos. Cuando hablamos de crear un custom hook de contexto en React, estamos hablando de crear una función JavaScript que guarde la llamada al contexto para que podamos reutilizarla en varios componentes.
Entonces, supongamos que tenemos un componente como el siguiente, que es un botón para autenticar al usuario:
import AuthContext from ‘./context’:
function AuthButton ({ className }) {
const { isLogged, handleLogout; onLogout } = useContext (AuthContext);
const handleLogoutClick = async ( ) => {
await logout ( );
onLogout ( );
};
return isLogged ? (
<Button className= {className} onClick = {handleLogoutClick}>
Logout
</Button>
) : (
<Button as={Link} to=»/login» variant=»primary» className= {className}>
Login
</Button>
);
}
export default AuthButton;
En las líneas de código anteriores, hemos llamado al contexto AuthContext para obtener el estado isLogged y las funciones handleLogout y onLogout. Este método lo hemos aprendido y creado en nuestro post sobre useContext en React.
Ahora, como esta llamada es necesaria a nivel global de nuestra aplicación, es probable que ejecutemos esta misma línea de código en varios componentes para llamar al contexto. Para simplificar este proceso repetitivo, podemos crear un custom hook de contexto en React. Esto, además, nos permitirá aislar al componente un poco del hecho de que determinados datos salen de un contexto, independizando los componentes del lugar del que provienen sus datos.
¿Cómo crear un custom hook de contexto en React?
Lo primero que necesitamos para crear un custom hook de contexto en React es determinar en qué sección de nuestro código escribiremos esta función. Nosotros lo haremos en el archivo en el que hemos creado nuestro AuthContex.
Ahora, para crear un custom hook, basta con crear una función que empiece con la palabra use; nosotros lo llamaremos useAuth. Esta es la primera de las reglas de las que hablamos en nuestro post sobre qué son los custom hooks en React.
function useAuth ( ) {
}
¿Qué haremos en esta función? Pues aquí esconderemos la lógica que necesitamos para traer el dato del contexto. Es decir, llamamos al hook useContext y pasamos el dato del contexto. Esta función, además, retornará el resultado de esta llamada.
export function useAuth ( ) {
const auth = useContext (AuthContext);
return auth
}
Con las líneas de código anteriores hemos logrado crear un custom hook de contexto en React de una manera súper simple. Puede que te estés preguntando lo útil que es esto frente a lo que teníamos antes. Entonces ¿qué ganamos?
Al crear un custom hook de contexto en React, nos ahorramos el hecho de tener que importar el contexto en cada uno de los archivos en los que queramos llamarlo. Esto se da porque ya no hay necesidad de usar el useContext ni llamar al contexto. Es decir, nos ahorramos la siguiente línea de código:
import AuthContext from ‘./context’:
Además, estamos escondiendo la lógica que define que un dato se saca del contexto. Entonces, si eventualmente decidimos hacer que los datos isLogged, handleLogout y onLogout vengan del localStorage o de otro lugar, podemos cambiar el custom hook directamente en vez de tener que cambiar cada uno de los componentes que llamaban al contexto. Esto funciona porque al componente no le importa realmente de dónde viene el dato, solo le importa obtenerlo. De este modo, estamos escondiendo un poco la dependencia a un lugar.
¿Cómo implementamos el custom hook creado?
Ahora que hemos creado el custom hook de contexto, podemos implementarlo en el componente AuthButton que te hemos mostrado inicialmente. Para ello, nos vamos al archivo en donde tenemos el componente y reemplazamos el useContext (AuthContext) por useAuth. Esto nos ahorra importar useContext de React y el contexto, aunque igualmente deberemos importar el nuevo custom hook con import { useAuth } from ‘./context’.
Si quieres conocer más sobre la creación de hooks personalizados, te invitamos a leer nuestro post sobre custom hooks para una mejor legibilidad en React.
¿Cuál es el siguiente paso?
Después de leer este post, no solo has aprendido a crear un custom hook de contexto en React, sino que también has dado un paso hacia ser un experto del desarrollo web. Ahora, el siguiente paso es aprender más sobre esta y otras herramientas fundamentales para la programación en la web. Para lograrlo, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación íntegra e intensiva donde aprenderás a dominar lenguajes y herramientas como JavaScript, HTML, CSS, React, webPack y muchas más. ¿A qué esperas para dar el paso que te cambiará la vida? ¡Solicita ya más información!
