Context

El Context es una funcionalidad que facilita la transferencia de datos entre componentes sin tener que pasar explícitamente los datos a través de las propiedades en cada nivel de la jerarquía de componentes. ¿Cuándo deberías utilizarlo? Bueno, deberías usarlo cuando la información sea necesaria en toda una página o vista. Si la información fuera necesaria en toda la aplicación, sería recomendable utilizar Redux. Sin embargo, si solo se necesita entre algunos componentes, se puede utilizar RxJS.

Configuración inicial

// Creamos el contexto con el valor predeterminado
export const UserContext = createContext({
  user:false,
  setUser: (user:boolean) => {}
});

// Con esto envolvemos la app
export const UserProvider = {{ children }} => {

const [user, setUser] = useState('')

return(
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
)
}

// Esto es lo que vamos a utilizar en los componentes
export const useUserContext = () => {
const context = useContext(UserContext)
if( context == undefined){
throw new Error ('UserContext nuest be used within a UserContextProvider')
}
return context
}

Ahora, veamos cómo utilizar el proveedor en una página

import UserProvider from ...

function home() {
  return(
    <UserProvider>
      <Componente1/>
      <Componente2/>
      <Componente3/>
    </UserProvider>
  )
}

Y para usarlo en un componete, hagamos lo siguiente:

function componente1() {
	// Tomamos lo que pasamos por el provider
	const { user, setUser } = useUserContext()
	// Ahora se puede usar como un useState en toda la pagina
}

En resumen, el context nos permite compartir datos entre componentes sin tener que pasar explícitamente los datos a través de las propiedades en cada nivel de la jerarquía de componentes. Al crear un contexto y envolver nuestra aplicación con el proveedor, podemos acceder a los valores del contexto en cualquier componente utilizando la función useUserContext(). Esto nos permite utilizar los datos del contexto, como el usuario y una función para establecer el usuario, en diferentes partes de nuestra aplicación donde sea necesario.