React es una librería de Javascript conocida por facilitarnos la escritura de código JavaScript con una sintaxis similar a HTML. Uno de los elementos más revolucionarios de esta librería son los hooks, introducidos en las últimas versiones. En este post, te enseñaremos qué es y cómo funciona useContext en React, un hook fundamental para la comunicación entre componentes de esta librería.
¿Qué es useContext en React?
useContext en React es un hook que introduce esta librería JavaScript como alternativa de consumidor de contexto ContextConsumer. Como puedes leer en nuestro post sobre contexto en React, el contexto es un tipo de atajo para compartir datos y funciones entre distintos componentes. Para ello, el contexto crea un componente provider que almacena el dato y un componente consumer que accede a este dato desde el componente final. Este consumer puede ser tratado de dos maneras: con el contextconsumer en React o con el useContext en React.
Entonces, el useContext en React se introduce para sustituir el contextconsumer y facilitar este proceso. A continuación, te enseñamos cómo funciona.
¿Cómo funciona useContext en React?
El hook useContext en React funciona cuando tenemos un contexto ya creado. Recuerda que para ello utilizas el comando React.createContext. A continuación, te mostramos un ejemplo de la creación de este contexto. Sin embargo, para un tutorial más detallado te invitamos a leer nuestro post sobre cómo crear un contexto en React.
const MyContext = React.createContext ( );
Una vez tenemos este elemento creado, le asignamos al provider un valor como de costumbre.
<MyContext.Provider value={/*some value */}>
La diferencia ahora es que podemos usar el hook useContext para que nos devuelva directamente el valor que hemos puesto en el provider.
const value = useContext (MyContext);
Como puedes ver, lo que pasamos por el hook useContext es el contexto general, no solo el provider.
Te ponemos un ejemplo
Supongamos que tenemos el contexto que hemos creado en nuestro post sobre crear un contexto en React (AuthContext):
import {createContext} from ‘react’;
const AuthContext = createContext ( )
En ese post ya hemos definido nuestro provider y hemos envuelto todas nuestras rutas con él para que todas tengan acceso a sus valores. A continuación, puedes ver este componente:
<AuthContextProvider value = {{ isLogged, handleLogin, handleLogout}}>
Ahora, ¿cómo le pasamos estos valores a otro objeto? Para pasar una serie de valores, variables, funciones o datos de un provider a un componente, debemos usar un consumidor intermediario. Es decir, deberemos insertar un useContext en React en aquel componente.
Supongamos que este componente es un botón que necesita el estado isLogged y la función handleLogout para funcionar, que se encuentran dentro del provider. Entonces, podemos insertar la siguiente línea de código directamente dentro del componente botón:
const value = useContext (AuthContext)
Como puedes ver, lo que le pasamos al hook useContext es el contexto directamente, no el provider. Esto se debe a que dentro del AuthContext ya hemos declarado los componentes AuthContextProvider y AuthContextConsumer. Entonces, para usar el hook useContext, nos conectamos directamente al contexto en el que se encuentra el provider del que queremos sacar los datos.
En este sentido, la variable value que hemos declarado corresponde al objeto con isLogged, handleLogin y handleLogout. De esta manera, el botón que hemos creado accede directamente a todos los datos que se encuentran dentro del provider.
Si queremos seleccionar solo unos datos dentro del provider y no todos, podemos desestructurar el value. En nuestro caso, solo queremos el isLogged y handleLogout. Esto se vería de la siguiente manera:
const {isLogged, handleLogout: onLogout} = useContext (AuthContext)
Ten en cuenta que podemos cambiarle el nombre a estos elementos usando los dos puntos.
De este modo, cuando el estado de isLogged cambie, el valor del contexto cambiará y así lo hará el botón, que se renderizará de nuevo cogiendo el nuevo valor de isLogged. Además, la función handleLogout pasa a ser onLogout solo en este componente botón.
¿Te animas a seguir aprendiendo?
Tras leer este post, sabes exactamente qué es y cómo funciona el hook useContext en React y puedes utilizarlo para llamar a valores desde distintos componentes en tu código. Sin embargo, el mundo de la programación es muy amplio y todavía queda mucho que aprender. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás todo lo necesario para ser un experto en desarrollo web. ¿Te animas a seguir aprendiendo con nosotros? ¡Solicita más información!
