useContext

Vista previa del material en texto

UseContext 
 
`useContext` es otro hook en React que proporciona una forma de acceder al contexto de un 
componente funcional sin necesidad de pasar propiedades a través de múltiples niveles de 
componentes. El contexto en React es una forma de compartir datos entre componentes sin tener 
que pasar manualmente las propiedades de un componente a otro. 
 
El hook `useContext` se utiliza en combinación con el componente `Context.Provider` y 
`Context.Consumer` para proporcionar y consumir el contexto. El `Context.Provider` se utiliza para 
definir el contexto y proporcionar los datos que se compartirán con los componentes hijos, mientras 
que `Context.Consumer` se utiliza para consumir los datos del contexto en los componentes hijos. 
 
Sintaxis del hook `useContext`: 
 
------------------------------------------------------- 
const valor = useContext(Contexto); 
------------------------------------------------------ 
 
`Contexto` es el objeto creado por `React.createContext`, que contiene el valor proporcionado por el 
`Context.Provider`. `useContext` devuelve el valor actual del contexto y te permite acceder a él 
dentro del componente funcional. 
 
Ejemplo de cómo usar `useContext` en un componente funcional: 
 
----------------------------------------------------------------------------------------------- 
import React, { useContext } from 'react'; 
 
// Creamos un contexto 
const MiContexto = React.createContext(); 
 
// Componente Proveedor de Contexto 
const Proveedor = ({ children }) => { 
 const valorCompartido = 'Hola desde el contexto'; 
 
 return ( 
 <MiContexto.Provider value={valorCompartido}> 
 {children} 
 </MiContexto.Provider> 
 ); 
}; 
 
const ComponenteConsumidor = () => { 
 // Utilizamos el hook useContext para acceder al valor del contexto 
 const valor = useContext(MiContexto); 
 
 return <p>{valor}</p>; 
}; 
 
const App = () => { 
 return ( 
 <Proveedor> 
 <ComponenteConsumidor /> 
 </Proveedor> 
 ); 
}; 
 
export default App; 
------------------------------------------------------------------------------------- 
 
En este ejemplo, hemos creado un contexto llamado `MiContexto` utilizando 
`React.createContext()`. Luego, hemos creado un componente `Proveedor` que utiliza 
`MiContexto.Provider` para proporcionar el valor `'Hola desde el contexto'` a los componentes hijos. 
 
Dentro del componente `ComponenteConsumidor`, utilizamos `useContext(MiContexto)` para 
acceder al valor del contexto proporcionado por el `Proveedor`. Como resultado, el componente 
`ComponenteConsumidor` mostrará el mensaje `'Hola desde el contexto'` en el DOM. 
 
`useContext` es especialmente útil cuando deseas compartir datos o funcionalidades comunes entre 
varios componentes en diferentes niveles de la jerarquía de componentes. Ayuda a evitar la 
propagación de propiedades a través de múltiples niveles y facilita la administración de datos 
globales en la aplicación de React.