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

Se crea el contexto con createContext.
Se crea un proveedor (Provider) que envuelve la app y maneja el estado.
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.