Guía Completa para Dominar el Hook useContext en React

¿Qué esel Hook `useContext`?

useContext es un Hook de React que permite suscribirse y consumir datos desde un Context Provider en cualquier nivel del árbol de componentes. Es la solución de React para evitar el “prop drilling” (pasar props a través de múltiples niveles de componentes).

Características principales

🌍 Compartir estado global
⚡ Acceso a datos desde cualquier componente hijo
🎯 Evita prop drilling
🔄 Actualización automática de componentes

Sintaxis Básica

jsx

// 1. Crear el contexto
const MiContexto = createContext(valorInicial);

// 2. Proveer el contexto
<MiContexto.Provider value={valor}>
{children}
</MiContexto.Provider>

// 3. Consumir el contexto
const valor = useContext(MiContexto);

Ejemplo Completo de Implementación

1. Creación y Configuración del Contexto

jsx

// ThemeContext.js
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
  setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

const value = {
  theme,
  toggleTheme
};

return (
  <ThemeContext.Provider value={value}>
    {children}
  </ThemeContext.Provider>
);
}

2. Uso en Componentes

jsx

// App.js
function App() {
return (
  <ThemeProvider>
    <MainLayout />
  </ThemeProvider>
);
}

// MainLayout.js
function MainLayout() {
const { theme } = useContext(ThemeContext);

return (
  <div className={`layout ${theme}`}>
    <Navbar />
    <Content />
    <Footer />
  </div>
);
}

// ThemeToggle.js
function ThemeToggle() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <button onClick={toggleTheme}>
      Cambiar a tema {theme === 'light' ? 'oscuro' : 'claro'}
    </button>
  );
}

Casos de Uso Prácticos

1. Gestión de Autenticación

jsx

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

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  const login = async (credentials) => {
    setLoading(true);
    try {
      const response = await apiLogin(credentials);
      setUser(response.user);
      return true;
    } catch (error) {
      return false;
    } finally {
      setLoading(false);
    }
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// Hook personalizado para usar el contexto
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth debe usarse dentro de un AuthProvider');
  }
  return context;
}

2. Gestión de Carrito de Compras

jsx

// CartContext.js
const CartContext = createContext();

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);

  const addItem = (product) => {
    setItems(prevItems => {
      const existingItem = prevItems.find(item => item.id === product.id);
      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prevItems, { ...product, quantity: 1 }];
    });
  };

  const removeItem = (productId) => {
    setItems(prevItems => 
      prevItems.filter(item => item.id !== productId)
    );
  };

  const clearCart = () => {
    setItems([]);
  };

  const getTotal = () => {
    return items.reduce((total, item) => 
      total + (item.price * item.quantity), 0
    );
  };

  return (
    <CartContext.Provider value={{
      items,
      addItem,
      removeItem,
      clearCart,
      getTotal
    }}>
      {children}
    </CartContext.Provider>
  );
}

3. Gestión de Idiomas (i18n)

jsx

// LanguageContext.js
const LanguageContext = createContext();

const translations = {
  es: {
    welcome: 'Bienvenido',
    goodbye: 'Adiós'
  },
  en: {
    welcome: 'Welcome',
    goodbye: 'Goodbye'
  }
};

export function LanguageProvider({ children }) {
  const [language, setLanguage] = useState('es');

  const translate = (key) => {
    return translations[language][key] || key;
  };

  return (
    <LanguageContext.Provider value={{
      language,
      setLanguage,
      translate
    }}>
      {children}
    </LanguageContext.Provider>
  );
}

Patrones Avanzados

1. Múltiples Contextos

jsx

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <LanguageProvider>
          <CartProvider>
            <MainApp />
          </CartProvider>
        </LanguageProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

2. Context con Reducer

jsx

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function CountProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CountContext.Provider value={{ state, dispatch }}>
      {children}
    </CountContext.Provider>
  );
}

Mejores Prácticas 🎯

1. Crear Hooks Personalizados

jsx

// useTheme.js
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme debe usarse dentro de un ThemeProvider');
  }
  return context;
}

2. Separación de Contextos

jsx

// Mejor: Contextos separados para diferentes responsabilidades
const UserContext = createContext();
const ThemeContext = createContext();
const SettingsContext = createContext();

// Peor: Un solo contexto para todo
const AppContext = createContext();

3. Optimización de Renders

jsx

function OptimizedProvider({ children }) {
  const [state, setState] = useState({
    theme: 'light',
    user: null
  });

  const themeValue = useMemo(() => ({
    theme: state.theme,
    setTheme: (theme) => setState(prev => ({ ...prev, theme }))
  }), [state.theme]);

  const userValue = useMemo(() => ({
    user: state.user,
    setUser: (user) => setState(prev => ({ ...prev, user }))
  }), [state.user]);

  return (
    <ThemeContext.Provider value={themeValue}>
      <UserContext.Provider value={userValue}>
        {children}
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

Errores Comunes y Soluciones

1. No Envolver el Provider

jsx

// ❌ Mal: Usar contexto sin provider
function App() {
  const theme = useContext(ThemeContext); // Error!
  return <div>{theme}</div>;
}

// ✅ Bien: Asegurar que existe un provider
function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

2. Re-renders Innecesarios

jsx

// ❌ Mal: Valor nuevo en cada render
function Provider({ children }) {
  return (
    <MyContext.Provider value={{ data: {} }}>
      {children}
    </MyContext.Provider>
  );
}

// ✅ Bien: Valor memorizado
function Provider({ children }) {
  const value = useMemo(() => ({
    data: {}
  }), []);

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
}

Debugging

1. DevTools

jsx

function DebugProvider({ children }) {
  const value = useContext(MyContext);
  
  useEffect(() => {
    console.log('Context value changed:', value);
  }, [value]);

  return children;
}

2. Error Boundaries para Contexto

jsx

class ContextErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Error en el contexto</h1>;
    }
    return this.props.children;
  }
}