Guías Técnicas

Entendiendo el hook useContext (Contexto Global)

  ¿Qué es useContext en React Native?

El hook useContext permite a los componentes consumir un estado global sin necesidad de pasarlo por props. Es ideal para temas, autenticación, idioma, etc.

🧠 Crear un Contexto Global en React Native

  1. Se crea el contexto con createContext.
  2. Se crea un proveedor (Provider) que envuelve la app y maneja el estado.
  3. Se accede al valor con useContext desde cualquier componente.
jsx 
import React, { createContext, useContext, useState } from 'react';
import { View, Text, Button } from 'react-native';

// Crear el contexto
const TemaContext = createContext();

// Proveedor de contexto
const TemaProvider = ({ children }) => {
const [tema, setTema] = useState('claro');

const cambiarTema = () => {
  setTema(temaActual => temaActual === 'claro' ? 'oscuro' : 'claro');
};

return (
  <TemaContext.Provider value={{ tema, cambiarTema }}>
    {children}
  </TemaContext.Provider>
);
};

Consumir el Contexto con useContext

Ahora cualquier componente puede usar useContext para acceder al estado compartido.

jsx 
const ComponenteTematizado = () => {
const { tema, cambiarTema } = useContext(TemaContext);

return (
  <View style={{ 
    backgroundColor: tema === 'claro' ? '#fff' : '#333',
    padding: 20 
  }}>
    <Text style={{ 
      color: tema === 'claro' ? '#000' : '#fff' 
    }}>
      Tema actual: {tema}
    </Text>
    <Button title="Cambiar Tema" onPress={cambiarTema} />
  </View>
);
};

🧪 Envolviendo la App con el Provider

Para que el contexto esté disponible en toda la app, envuelve tu componente raíz con el TemaProvider.

jsx 
const App = () => {
return (
    <TemaProvider>
      <ComponenteTematizado />
    </TemaProvider>
  );
};

export default App;
  ¿Cuándo usar useContext?

El hook useContext es útil cuando:

  • Manejo de tema oscuro/claro.
  • Información del usuario autenticado.
  • Configuraciones globales como idioma o modo de navegación.
  • Datos que deben ser accesibles desde varios componentes anidados.

  Ventajas de useContext

  • Evita la necesidad de pasar props manualmente a través de múltiples niveles de componentes.
  • Evita prop drilling (pasar props innecesarios).
  • Más limpio y organizado.
  • Ideal para datos compartidos entre muchos componentes.

  Importante 😊

Si aún tienes dudas sobre cómo trabajar con el hook useEffect, te recomiendo revisar el recurso adicional Ejemplos de Hooks, donde encontrarás ejemplos prácticos que te ayudarán a dominarlo correctamente.

  Resumen

  • createContext: Crea un nuevo contexto.
  • Provider: Permite envolver componentes y proveer valores globales.
  • useContext: Accede al contexto desde cualquier parte del árbol de componentes.