useContext Hook ### ### Introducción ### El Hook useContext permite a un componente funcional suscribirse a contextos de React sin necesidad de utilizar componentes de orden superior (HOC) o el patrón de render props. Es una forma conveniente de acceder al contexto directamente en un componente funcional. ### Sintaxis básica ### useContext se utiliza pasando el contexto que deseas consumir como argumento. javascript import React, { useContext } from 'react'; const UserContext = React.createContext(); function UserProfile() { const user = useContext(UserContext); return <div>Hola, {user.name}!</div>; } function App() { const user = { name: 'Alice', age: 25 }; return ( <UserContext.Provider value={user}> <UserProfile /> </UserContext.Provider> ); } ### Descripción del ejemplo ### En este ejemplo: - UserContext se crea usando React.createContext(). - UserProfile usa el Hook useContext para consumir el UserContext. La variable user obtenida del contexto contiene el valor proporcionado por el UserContext.Provider en App. ### Casos de uso comunes ### El Hook useContext es útil cuando necesitas compartir datos que son accesibles para muchos componentes sin paso explícito a través de props, como: - Datos de usuario autenticado - Temas de la UI (colores, fuentes, etc.) - Preferencias de localización ### Ejemplo avanzado ### Considera un ejemplo más avanzado con múltiples contextos. javascript import React, { useContext } from 'react'; const ThemeContext = React.createContext('light'); const UserContext = React.createContext({ name: 'Guest' }); function Toolbar() { return ( <div> <ThemedButton /> </div> ); } function ThemedButton() { const theme = useContext(ThemeContext); const user = useContext(UserContext); return ( <button style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}> {user.name}'s Themed Button </button> ); } function App() { return ( <ThemeContext.Provider value='dark'> <UserContext.Provider value={{ name: 'Alice' }}> <Toolbar /> </UserContext.Provider> </ThemeContext.Provider> ); } ### Descripción del ejemplo avanzado ### En el ejemplo avanzado: - Se crean dos contextos, ThemeContext y UserContext. - ThemedButton usa useContext para consumir ambos contextos y renderizar un botón temático con el nombre del usuario. ### Ventajas de useContext ### - Simplicidad: Acceso directo al contexto sin necesidad de componentes de orden superior. - Legibilidad: Mejora la claridad del código al eliminar envolturas de funciones adicionales. ### Limitaciones ### Aunque useContext simplifica el acceso al contexto, también puede aumentar el acoplamiento entre los componentes y los contextos. Debes usarlo con precaución para evitar problemas de mantenibilidad. [Placeholder para imagen sobre el flujo del useContext: Diagrama que muestra cómo los componentes funcionales consumen contextos utilizando el Hook useContext, incluyendo la creación del contexto y el uso del proveedor para pasar valores a los componentes descendientes.]