Manejar estado global con Context API

Introducción al Estado Global y los Límites de las Props

En el desarrollo de aplicaciones con React Native, la gestión de la información que fluye entre componentes es fundamental. Inicialmente, aprendemos a usar props y estado local (usando useState). Las props permiten pasar datos de un componente padre a sus hijos, mientras que el estado local maneja información interna y reactiva dentro de un solo componente. Este modelo funciona perfectamente para jerarquías pequeñas y bien definidas.

Sin embargo, a medida que la aplicación crece en complejidad, nos encontramos con un escenario común: componentes que necesitan compartir y sincronizar el mismo estado, pero que se encuentran en ramas completamente diferentes del árbol de componentes. Pasar props a través de múltiples niveles intermedios (un patrón conocido como "prop drilling") se vuelve rápidamente engorroso, difícil de mantener y propenso a errores. El código se llena de componentes que reciben y reenvían props sin utilizarlas realmente, solo para que lleguen a un componente hijo profundo que sí las necesita.

Aquí es donde entra en juego la necesidad de un estado global. Un estado global es un almacén de datos que reside en un nivel superior de la aplicación y al cual cualquier componente, sin importar su profundidad en el árbol, puede suscribirse para leer datos o emitir actualizaciones. React ofrece varias soluciones para este problema, y la Context API es la herramienta oficial y más integrada para escenarios de complejidad media, perfecta para temas como preferencias de usuario, autenticación, carritos de compra o configuraciones de la app.

Concepto Clave: Desacoplamiento con Context API

Imagina una central de correos en una gran ciudad (el Context Provider). En lugar de que cada residente (componente) tenga que llevar personalmente una carta a través de todas las calles y entregarla mano a mano a través de conocidos (prop drilling), simplemente la deja en la central de correos. El cartero (el mecanismo de Context) se encarga de entregar esa carta directamente al destinatario correcto, sin que los vecinos por los que pasa la ruta tengan que involucrarse. La central de correos provee el servicio de mensajería a toda la ciudad (el árbol de componentes), y cualquier residente puede consumir ese servicio para enviar o recibir.

La Context API se basa en tres pilares fundamentales: React.createContext(), Context.Provider y Context.Consumer (o el hook useContext). createContext crea el objeto "central de correos", que incluye un componente Provider y un componente Consumer. El Provider es el componente que envuelve la parte del árbol que necesita acceso al estado global; es quien "provee" el valor. Los componentes descendientes pueden entonces "consumir" ese valor de dos maneras: mediante el componente Consumer (menos común hoy) o, de manera más elegante y moderna, mediante el hook useContext.

Tip: Context está diseñado para compartir datos que pueden considerarse "globales" para un árbol de componentes. Úsalo para datos que necesitan ser accesibles desde muchos componentes en diferentes niveles, pero no lo uses como reemplazo de un estado local en componentes que solo necesitan datos específicos.

Cómo Funciona en la Práctica: Un Ejemplo Paso a Paso

Vamos a construir un sistema de autenticación simple para nuestra app. Queremos que el estado del usuario (si está logueado o no, y su nombre) esté disponible en la pantalla de perfil, en el encabezado principal y en el menú de configuración, componentes que no tienen una relación padre-hijo directa.

Paso 1: Crear el Contexto. Primero, definimos la "forma" de nuestro estado global y las funciones para modificarlo. Creamos un archivo, por ejemplo, AuthContext.js. Aquí, usamos React.createContext() para crear un nuevo contexto. Inicialmente, podemos definir un valor por defecto, pero lo más común es definir también las funciones que modificarán el estado (login, logout).

Paso 2: Crear el Provider con Estado. En el mismo archivo, creamos un componente funcional llamado AuthProvider. Este componente utilizará useState o useReducer para manejar el estado real que queremos compartir (por ejemplo, un objeto user y un isAuthenticated). Luego, este componente retornará el AuthContext.Provider, pasando como value un objeto que contiene tanto el estado como las funciones para actualizarlo. Este Provider envolverá a los componentes hijos.

Paso 3: Envolver la Aplicación. En el punto de entrada de nuestra app, típicamente en App.js o en un componente raíz, importamos nuestro AuthProvider y envolvemos toda nuestra aplicación (o la parte que necesite el estado de autenticación) con él. Esto hace que el valor del contexto esté disponible para todos los componentes dentro.

Paso 4: Consumir el Contexto en Cualquier Componente. Finalmente, en cualquier componente hijo (por ejemplo, ProfileScreen.js o Header.js), importamos el contexto y usamos el hook useContext(AuthContext). Este hook nos devolverá el objeto value que definimos en el Provider, permitiéndonos leer el estado (ej: user.name) y ejecutar acciones (ej: logout()).

Código en Acción: Implementación Completa de un AuthContext

A continuación, un ejemplo completo y funcional de un Contexto para autenticación, utilizando también un reducer para manejar lógica de estado más compleja de manera predecible.

// AuthContext.js
import React, { createContext, useReducer, useContext } from 'react';

// 1. Crear el Contexto
const AuthContext = createContext();

// Estado inicial
const initialState = {
  user: null,
  isAuthenticated: false,
  loading: false,
};

// Reducer para manejar acciones
const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN_REQUEST':
      return { ...state, loading: true };
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload,
        isAuthenticated: true,
        loading: false,
      };
    case 'LOGIN_FAILURE':
      return { ...state, user: null, isAuthenticated: false, loading: false };
    case 'LOGOUT':
      return { ...state, user: null, isAuthenticated: false };
    default:
      return state;
  }
};

// 2. Crear el Componente Provider
export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, initialState);

  // Acciones (funciones que dispatch acciones al reducer)
  const login = async (email, password) => {
    dispatch({ type: 'LOGIN_REQUEST' });
    try {
      // Simulación de una llamada a una API
      const mockUser = { id: '1', name: 'Juan Pérez', email };
      setTimeout(() => {
        dispatch({ type: 'LOGIN_SUCCESS', payload: mockUser });
      }, 1000);
    } catch (error) {
      dispatch({ type: 'LOGIN_FAILURE' });
    }
  };

  const logout = () => {
    dispatch({ type: 'LOGOUT' });
  };

  // Valor que se provee al árbol
  const value = {
    state,
    login,
    logout,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

// 3. Hook personalizado para facilitar el consumo
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth debe ser usado dentro de un AuthProvider');
  }
  return context;
};

// App.js
import React from 'react';
import { SafeAreaView, StatusBar } from 'react-native';
import { AuthProvider } from './context/AuthContext';
import Navigator from './navigation/Navigator'; // Tu componente de navegación

export default function App() {
  return (
    <AuthProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <StatusBar />
        <Navigator />
      </SafeAreaView>
    </AuthProvider>
  );
}

// ProfileScreen.js - Un componente que consume el contexto
import React from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import { useAuth } from '../context/AuthContext';

const ProfileScreen = () => {
  // 4. Consumir el contexto usando nuestro hook personalizado
  const { state, logout } = useAuth();
  const { user, isAuthenticated, loading } = state;

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {isAuthenticated ? (
        <>
          <Text style={{ fontSize: 24 }}>Bienvenido, {user.name}</Text>
          <Text>Email: {user.email}</Text>
          <Button title="Cerrar Sesión" onPress={logout} />
        </>
      ) : (
        <Text>Por favor, inicia sesión</Text>
      )}
    </View>
  );
};

export default ProfileScreen;

Errores Comunes y Cómo Evitarlos

1. Provocar re-renders innecesarios: Un error crítico es pasar un objeto nuevo como value en cada render del Provider. Si el value cambia, React re-renderizará todos los componentes consumidores, incluso si la parte del estado que les interesa no ha cambiado. Solución: Memoriza el objeto value con useMemo o, como en nuestro ejemplo, usa un reducer que gestiona un estado estable.

2. Usar Context para estado de alta frecuencia de actualización: Context no está optimizado para datos que cambian constantemente (como la posición de un scroll o un valor de un juego en tiempo real). Para estos casos, considera librerías especializadas como Zustand, Jotai o Redux Toolkit. Solución: Evalúa la frecuencia de cambio. Context es ideal para datos que cambian de forma episódica (login, cambio de tema, actualización de perfil).

3. Crear un "Contexto monolítico": Intentar meter todo el estado de la aplicación en un solo Contexto gigante. Esto hace el código difícil de mantener y acentúa el problema de los re-renders innecesarios. Solución: Divide tu estado global en múltiples contextos lógicos (AuthContext, ThemeContext, CartContext). Un componente solo se suscribirá a los contextos que necesita.

4. No proveer un valor por defecto útil o no manejar el contexto fuera del Provider: Si usas useContext en un componente que no está dentro del Provider correspondiente, recibirás el valor por defecto de createContext(), que suele ser undefined. Solución: Siempre verifica que el componente esté envuelto. Crear un hook personalizado (como nuestro useAuth) que lance un error claro es una excelente práctica.

5. Olvidar la optimización de componentes hijos del Provider: Si el componente Provider se re-renderiza frecuentemente por cambios en sus props o estado padre, puede forzar re-renders en el árbol. Solución: Asegúrate de que el Provider esté lo más alto y estable posible en el árbol. Puedes memoizar el propio componente Provider si es necesario.

Checklist de Dominio

• Puedo explicar la diferencia entre estado local, paso de props (prop drilling) y estado global.
• Sé crear un contexto usando React.createContext() y definir un valor inicial.
• Puedo construir un componente Provider funcional que maneje estado interno (con useState o useReducer) y lo provea a través de la prop value.
• Sé envolver correctamente mi aplicación (o una parte de ella) con el componente Provider creado.
• Puedo consumir el contexto en cualquier componente hijo utilizando el hook useContext().
• He implementado un hook personalizado (ej: useAuth, useTheme) para encapsular el consumo del contexto y añadir validaciones.
• Identifico cuándo es apropiado usar Context API (datos episódicos, de contexto) y cuándo es mejor usar otras soluciones (estado de alta frecuencia).
• Puedo estructurar mi estado global en múltiples contextos separados para evitar un contexto monolítico y optimizar los re-renders.